在给定X和Y的画布imageData上设置像素

Question

我目前正在使用fillRect方法在画布中设置单个像素，如下所示：

context.fillStyle = "rgba("+colourR+","+colourG+","+colourB+",255)";
context.fillRect( x, y, 1, 1 )

此方法工作正常，但它和putImageData非常慢。所以我决定尝试在循环中单独设置像素，然后在准备输出到屏幕时使用putImageData的单个调用，如下所示：

var screenImageData = context.getImageData(0,0,800,600);
var pixelBuffer = screenImageData.data;    
pixelBuffer[(x*4) + (y*(screenImageData.width * 4))] = colourR;
pixelBuffer[(x*4) + (y*(screenImageData.width * 4)) + 1] = colourG;
pixelBuffer[(x*4) + (y*(screenImageData.width * 4)) + 2] = colourB;
pixelBuffer[(x*4) + (y*(screenImageData.width * 4)) + 3] = 255;

...

context.putImageData(screenImageData,0,0);

但是，这会为fillRect方法生成一个完全不同的输出（它看起来就像乱七八糟的垃圾）。我在这里做错了什么？

Answer 1

这里的问题在于计算x和y的方式，显然putImageData会自动将它们转换为int。只需要使用Math.floor即可。