为给定的X和Y在canavs imageData上设置一个像素

Setting a pixel on a canavs imageData for a given X and Y

本文关键字：设置 像素 一个 imageData canavs      更新时间：2023-09-26

我目前正在使用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方法生成一个完全不同的输出(它看起来就像混乱的垃圾)。我哪里做错了?

这里的问题在于计算x和y的方式，显然putImageData会自动将它们转换为整型。使用数学。

相关文章：