HTML 5畫布標籤，更改特定像素

Question

使用畫布標籤，如何在特定位置更改特定像素的顏色，而無需使用諸如ctx.lineTo或ctx.fillRect之類的東西？

實施例：

我的畫布標記是500個像素×600個像素，如何在x軸和200轉動像素在位置100上的Y軸爲藍色？

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