HTML 5 画布标签，更改特定像素

Question

使用画布标签，我如何在不使用ctx.lineTo 或ctx.fillRect 之类的东西的情况下更改特定位置的特定像素的颜色？

例子：

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

Answer 1

这是一个获取/替换指定像素颜色的函数：

// 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);
}