Javascript 在画布上绘制一个填充有随机颜色正方形的圆圈

我有一个非常奇怪的例子要研究。。。 我需要用1x1像素填充一个圆圈，所有像素在浏览器中使用不同的颜色

我试过的是这样的

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function createRandomSqaure(destination) {
    var size = destination.height() * destination.width();

    for (var i = 0; i < size; i += 1) {
        destination.append('<div class="pixel" style="background: ' + getRandomColor() + '"></div>');
    }
}

createRandomSqaure($('.pic'));

函数getRandomColor（）{ 变量字母='0123456789ABCDEF'。拆分（''）； var color='#'； 对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.round（Math.random（）*15）]； } 返回颜色； } 函数createRandomSquare（目标）{ var size=destination.height（）*destination.width（）； 对于（变量i=0；i 情况是，它非常慢（正如你所能想象的，200x200图像的循环次数为40k次），我想也许更好的方法是在画布上绘制它？ 我需要在最后画一个充满这些像素的圆

我不知道如何以一种更优化的方式来做这样的事情，我也可以使用nodejs服务器，但我认为在heroku上生成这样的服务器端太过分了

---

我只是好奇你们怎么想，做这样的事情最好的方法是什么？

我会使用canvas，因为使用实际的DOM元素会增加大量的开销

function drawRect(x,y) {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.rect(x,y,1,1);
    ctx.strokeStyle = getRandomColor();
    ctx.stroke();
}

---

这仍然会很糟糕，但不管怎样都很糟糕，除非你有一台服务器在你手上生成图像或其他东西，这样客户端就不会被束缚。

你可以使用这样一种简单的方法：

• 在画布上以200x200网格绘制具有随机颜色的所有像素
• 改变组合模式
• 在上面画圆圈

结果为：

var canvas = document.getElementById('canvas'), // get canvas element
    ctx = canvas.getContext('2d'),              // get context
    x, y = 0,                                   // initialize
    dia = canvas.width,
    radius = dia * 0.5;

ctx.translate(0.5, 0.5);                        // to make pixels sharper

for(; y < dia; y++) {                           // walk x/y grid
    for(x = 0; x < dia; x++) {
        ctx.fillStyle = getRndColor();          // set random color
        ctx.fillRect(x, y, 1, 1);               // draw a pixel
    }
}

// create circle

// removes pixels outside next shape
ctx.globalCompositeOperation = 'destination-in'; 
ctx.arc(radius, radius, radius, 0, 2*Math.PI);
ctx.fill();

// reset
ctx.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 + ')';
}

示例：

var canvas = document.getElementById('canvas'), // get canvas element
    ctx = canvas.getContext('2d'),              // get context
    x, y = 0,                                   // initialize
    dia = canvas.width,
    radius = dia * 0.5;

ctx.translate(0.5, 0.5);                        // to make pixels sharper

for(; y < dia; y++) {                           // walk x/y grid
    for(x = 0; x < dia; x++) {
        ctx.fillStyle = getRndColor();          // set random color
        ctx.fillRect(x, y, 1, 1);               // draw a pixel
    }
}

// create circle

// removes pixels outside next shape
ctx.globalCompositeOperation = 'destination-in'; 
ctx.arc(radius, radius, radius, 0, 2*Math.PI);
ctx.fill();

// reset
ctx.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 + ')';
}

var canvas=document.getElementById（'canvas'），//获取画布元素
ctx=canvas.getContext（'2d'），//获取上下文
x、 y=0，//初始化
直径=画布宽度，
半径=直径*0.5；
ctx.translate（0.5,0.5）；//使像素更清晰
对于（；y

当然，添加40000个div非常慢，应该始终避免。像这样的技巧在旧的方式中被用来在div上获得动态圆角，这使得页面速度变得难以置信地慢

所以，是的，你应该使用画布。顺便说一下，您可以优化获得随机颜色的方式：

var r = Math.floor(Math.Random()* 256);
var g = Math.floor(Math.Random()* 256);
var b = Math.floor(Math.Random()* 256);

var cssColor = 'rgb(' + r +', ' + g + ',' + b +')';

---

用一个更好的解决方案击败我。方法：D