Question

使用canvas标记，如何在不使用ctx.lineTo或ctx.fillRect等内容的情况下更改特定位置的特定像素的颜色？

示例：

我的画布标签是500像素乘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);
}

HTML 5 canvas标签，更改特定像素

1 个答案: