브라우저에서 모두 다른 색상으로 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 + ')'; }