資料結構
網路
RDBMS
作業系統
Python
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律學在 HTML5 畫布上繪製一個用隨機顏色方塊填充的圓圈
當我們需要用顏色各不相同的 1x1 畫素填充一個圓圈時，可以在瀏覽器中使用這種簡單的方法：
- 在畫布上以 200x200 網格繪製顏色的畫素
- 更改複合模式
- 在頂部繪製圓圈
讓我們看一個例子
var canvas1 = document.getElementById('canvas'), // getting canvas element
ctx1 = canvas1.getContext('2d'), // getting context
x, y = 0, // initializing x and y coordinates
diamet = canvas1.width,
radius = diamet * 0.6;
ctx1.translate(0.6, 0.6); //Making pixels sharper
for(; y < diamet; y++) { // x/y grid
for(x = 0; x < diamet; x++) {
ctx1.fillStyle = getRndColor(); // Random color setting
ctx1.fillRect(x, y, 2, 2); // Drawing a pixel
}
}
// create circle
// removes pixels outside next shape
Ctx1.globalCompositeOperation = 'destination-in';
Ctx1.arc(radius, radius, radius, 0, 2*Math.PI);
Ctx1.fill();
// reset
Ctx1.globalCompositeOperation = 'source-over';
function getRndColor() {
var r = 255*Math.random()|0,
g = 255*Math.random()|0,
b = 255*Math.random()|0;
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
更新於： 30-Jan-2020
1K+ 瀏覽量
廣告