用canvas绘制的饼状图，颜色随机，动态生成

最新推荐文章于 2022-05-07 17:18:38 发布

why_yzq

最新推荐文章于 2022-05-07 17:18:38 发布

阅读量854

点赞数 2

分类专栏： H5 文章标签： H5 前端 canvas

本文链接：https://blog.csdn.net/why_yzq/article/details/52454574

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

想想自己平时太懒了，像jQuery一样，write less，do more, 但是，我决定改变了，write more，do more ！

这里贴上我用canvas绘制的饼状图，均分6等分，颜色随机。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id='cavs' width="600" height="600"></canvas>
</body>
<script>
    var canvas = document.getElementById('cavs')
    var ctx = canvas.getContext('2d');
    canvas.style.border = '1px solid red';

    function to_hudu(angle){
        return angle*Math.PI/180;
    }

    var x = canvas.width/2,
            y = canvas.width/2,
            r = 150,
            startAngle = -90,
            stepAngle = 60,
            i = 0;
    var timeId = setInterval(function () {
        //ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath()
        ctx.moveTo(x,y);
        //ctx.fillStyle = 'rgb('+(i+=1)+','+(255-20*i)+','+(255-10*i)+')';
        ctx.fillStyle = 'rgb(' +
                        parseInt(255*Math.random())+','+
                        parseInt(255*Math.random())+','+
                        parseInt(255*Math.random())+ ')';
        ctx.arc(x,y,r,to_hudu(startAngle),to_hudu(startAngle+=stepAngle));
        ctx.fill()
        if(startAngle>=270){
            clearInterval(timeId);
            startAngle = 270;
            console.log("绘画完成")
        }
    },500)



</script>
</html>