567day(繪製一個圓分成六等分顏色隨機.html)

《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();
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章