Html5 canvas HTML5画布标记，更改特定像素

使用canvas标记，如何在不使用诸如ctx.lineTo或ctx.fillRect之类的东西的情况下更改特定位置处特定像素的颜色

例如：

---

我的画布标记是500像素乘600像素，如何将x轴上位置100和y轴上位置200处的像素变为蓝色

这里有一个函数，用于获取/替换指定像素处的颜色：

// test
setPixel(100,200,0,0,255);

function setPixel(x, y, red, green, blue) {
    var pxData = ctx.getImageData(x,y,1,1);
    pxData.data[0]=red;
    pxData.data[1]=green;
    pxData.data[2]=blue;
    pxData.data[3]=255;
    ctx.putImageData(pxData,x,y);
}

如果要处理多个像素，则可以将getImageData拉至setPixel之外的变量，以获得更好的性能：

var pxData = ctx.getImageData(x,y,1,1);

// test
for(var x=100;x<125;x++){
    setPixel(x,200,0,0,255);
}

function setPixel(x, y, red, green, blue) {
    pxData.data[0]=red;
    pxData.data[1]=green;
    pxData.data[2]=blue;
    pxData.data[3]=255;
    ctx.putImageData(pxData,x,y);
}

---

在第二个示例中，我会将ctx.putImageData移出循环。同样值得一提的是：虽然大多数画布操作通常是硬件加速的，但在getImageData和putImageData之间执行的任何操作都不是，这使得直接像素操作的性能与大多数其他操作相比相当慢。当您需要大量实时像素级操作时，您可以查看WebGL并使用GPU上执行的像素着色器。@Philipp，如果您将ctx.putImageData从循环中取出，循环测试示例将中断，因为pxData只是1x1；啊，我知道你在那里做了什么。但在这种情况下，您应该使用。我更喜欢在第一个解决方案中使用getImageData。这样，如果我看到像素已经是蓝色的，我就不需要做putImageData了。在循环中，两者都将起作用。