567day(绘制一个圆分成六等分颜色随机.html)

最新推荐文章于 2025-02-14 17:13:43 发布

原创最新推荐文章于 2025-02-14 17:13:43 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML5 canvas元素将圆形分为六等分，并为每一等分随机填充颜色的方法。通过JavaScript编程，实现了动态生成随机颜色并应用于圆的各个扇形区域。

《2019年4月25日》【连续 567天】

标题：绘制一个圆分成六等分颜色随机.html；
内容：

var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    var w = ctx.canvas.width;
    var h = ctx.canvas.height;

    /*分成几等分*/
    var num = 360;
    /*一份多少弧度*/
    var angle = Math.PI * 2 / num;

    /*原点坐标*/
    var x0 = w / 2;
    var y0 = h / 2;

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

    /*上一次绘制的结束弧度等于当前次的起始弧度*/
    //var startAngle = 0;
    for (var i = 0; i < num; i++) {
        var startAngle = i * angle;
        var endAngle = (i + 1) * angle;
        ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.arc(x0, y0, 150, startAngle, endAngle);
        /*随机颜色*/
        ctx.fillStyle = getRandomColor();
        ctx.fill();
    }