canvas绘制饼图

cnavas绘制一个饼图十分方便，只要我们掌握了方法和技巧，画一个漂亮的饼图并困难，并且饼图在一些行业中也十分有用，因为它能够直观地反映出各部分的百分比，用于数据的统计。在画图的过程中运用了数学中的三角函数与角度和弧度的转换。下面是具体内容：

(1)最终效果图:

(2)代码程序

 var canvas = document.getElementById("demo");
   var canvas = document.getElementById("demo");
    canvas.width = 600;
    canvas.height = 600;
    canvas.style.border = "1px solid #f00";
    var ctx = canvas.getContext("2d");
    var data = [{
                "value": .37,
                "color": "red",
                "title": "欣赏风景"
            },{
                "value": .33,
                "color": "blue",
                "title": "缓解压力"
            },{
                "value": .09,
                "color": "green",
                "title": "广交朋友"
            },{
                "value": .06,
                "color": "pink",
                "title": "培养独立能力"
            },{
                "value": .15,
                "color": "purple",
                "title": "其他"
            }];
    // 始边的角度与终边的角度
    var sAngle = -90;
    var eAngle = -90;
    var tAngle = 0;
    // 定义坐标圆心
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    // 遍历每个扇形
    for(var i = 0; i < data.length; i++) { // 清除之前的样式 ctx.beginPath(); // 得到第i个扇形所占整个圆的终边角度 eAngle += data[i].value * 360; // 移动坐标圆心 ctx.moveTo(centerX, centerY); // 绘制第i个扇形 ctx.arc(centerX,centerY,200,sAngle * Math.PI / 180,eAngle * Math.PI / 180); // 第i个扇形填充颜色 ctx.fillStyle = data[i].color; ctx.fill(); // 给饼图添加文字 // 得到当前扇形角度的一半 tAngle = sAngle + 1 / 2 * data[i].value * 360; // 设置水平文字 if(tAngle > 90 & tAngle < 270)
        {
            ctx.textAlign = 'end';
        }
        // x = centerX + (r + 20) * Math.cos(tAngle * Math.PI / 180);
        var x = centerX + 220 * Math.cos(tAngle * Math.PI / 180);
        // x = centerX + (r + 20) * Math.sin(tAngle * Math.PI / 180);
        var y = centerY + 220 * Math.sin(tAngle * Math.PI / 180);
        ctx.fillText(data[i].value * 100 + '%', x, y) 
        // 当前的终边的角度作为下个扇形始边角度的备用
        sAngle = eAngle
    }