使用canvas绘制扇形图

时间：2022-03-14 08:17:29
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        你的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
<script>
    (function(){
        var canvas=document.querySelector('#cavsElem');
        var ctx=canvas.getContext('2d');
        canvas.width=600;
        canvas.height=600;
        canvas.strokeStyle='1px solid #000';
        var data = [{
            "value": .2,
            "color": "red",
            "title": "应届生"
        },{
            "value": .3,
            "color": "blue",
            "title": "社会招生"
        },{
            "value": .4,
            "color": "green",
            "title": "老学员推荐"
        },{
            "value": .1,
            "color": "#ccc",
            "title": "公开课"
        }];
        var tempAngle = -90;
        //设置角度的中间变量
        var x0 = 400, y0 = 400;
        var radius = 200;
        // 从-90度开始绘制
        for( var i = 0; i < data.length; i++ ) {
            ctx.beginPath();//因为设置不同的颜色，所以每次绘制完起一个新状态
            ctx.moveTo(x0,y0);
            //当前扇形的角度
            var angle = data[i].value * 360;
            ctx.fillStyle = data[i].color;
            //开始从 tempAngle绘制
            var startAngle  = tempAngle * Math.PI / 180;
            //从tempAngle绘制到 我们自己的angle区域
            var endAngle = (tempAngle + angle) * Math.PI / 180;
            //参数： x0，y0 圆心坐标，  radius：半径
            // startAngle：开始绘制的弧度
            // endAngle：结束绘制的弧度！！
            ctx.arc(x0, y0, radius, startAngle, endAngle);
            ctx.fill();
            tempAngle += angle;//下一次绘制的起始角度
        }
    }())
</script>
</body>
</html>

相关文章