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