html - 将单个像素插入 HTML5 Canvas

Question

我想插入一个带有颜色的像素，我使用这个代码:

context.fillStyle='RGB('+s[i]+')';
context.fillRect(i,y,1,1)

有没有更短的方法呢？例如在一行代码中？我的主要目标是减少代码量。

Answer 1

除了您在上面使用的方法之外，确实没有更短的方法可以做到这一点。您不必每次都包含一个fillStyle，所以它实际上只是一行代码来填充一个像素。

正如 Petteri 指出的那样，还有另一种填充像素的方法，它涉及直接操作像素数据。

Live Demo

var canvasData = ctx.getImageData(0,0,canvasWidth,canvasHeight);

//color 100,100 red
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 0] = 255;
ctx.putImageData(canvasData,0,0);

另请注意，对于上述方法，您需要为颜色的每个成分重复该行 3 次。例如，要设置红色、绿色、蓝色和您将使用的 alpha

canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 0] //red
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 1] //green
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 2] //blue
canvasData.data[((100*(canvasData.width*4)) + (100*4)) + 3] //alpha

假设您可以将数据放在一个数组中，然后根据需要循环遍历该数组和颜色。