html 给正方形填充颜色,在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 

for(x = 0; x 

ctx1.fillStyle = getRndColor(); // Random color setting

ctx1.fillRect(x, y, 2, 2); // Drawing a pixel

}

}

//创建圈子

//删除下一个形状之外的像素

Ctx1.globalCompositeOperation = 'destination-in';

Ctx1.arc(radius, radius, radius, 0, 2*Math.PI);

Ctx1.fill();

//重置

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 + ')';

}