在canavs的imageData设置一个像素对于给定的X和Y

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将它们自动转换为整数。在它们上使用Math.floor是所有必需的。