使用canvas绘制等分圆

最新推荐文章于 2023-02-28 20:06:19 发布

qq_44388958

最新推荐文章于 2023-02-28 20:06:19 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/qq_44388958/article/details/90182240

版权

代码如下 :

<body>
<canvas width="600" height="500" id="cvs"></canvas>
</body>

 var canvas = document.querySelector('#cvs');
    canvas.style.border = '1px solid blue';
    var cvs = canvas.getContext('2d');

    //圆弧的份数
    var num = 6;
    //一个圆弧对应的弧度
    var angle = Math.PI * 2 / num;

    var canvasW = canvas.width;
    var canvasH = canvas.height;

    //随机颜色
    var getRandomColor = function () {
        var r = parseInt(Math.random() * 256);
        var g = parseInt(Math.random() * 256);
        var b = parseInt(Math.random() * 256);
        return 'rgb(' + r + ',' + g + ',' + g + ')';
    }

    var star = 0;
    var end = angle;
    for (var i = 0; i < num; i++) {
        cvs.beginPath();
        cvs.moveTo(canvasW / 2, canvasH / 2);
        cvs.arc(canvasW / 2, canvasH / 2, 100, star, end);
        cvs.closePath();
        cvs.fillStyle = getRandomColor();
        cvs.fill();
        star = end;
        end = end + angle;
    }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_44388958

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
使用canvas绘制等分圆

代码如下 :<body><canvas width="600" height="500" id="cvs"></canvas></body> var canvas = document.querySelector('#cvs'); canvas.style.border = '1px solid blue'; ...
复制链接

扫一扫