Vẽ một vòng tròn chứa đầy các ô vuông màu ngẫu nhiên trên canvas HTML5

Khi chúng ta cần tô một vòng tròn có 1x1 pixel, tất cả bằng các màu khác nhau trong trình duyệt, chúng ta có thể sử dụng một cách tiếp cận đơn giản như sau:

• Vẽ tất cả các pixel với một số màu ngẫu nhiên trong lưới 200x200 trên canvas
• Thay đổi chế độ kết hợp
• Vẽ vòng tròn ở trên cùng

Hãy để chúng tôi xem một ví dụ:

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