我想插入一个带有颜色的像素,我使用这个代码:
context.fillStyle='RGB('+s[i]+')';
context.fillRect(i,y,1,1)
有没有更短的方法呢?例如在一行代码中? 我的主要目标是减少代码量。
最佳答案
除了您在上面使用的方法之外,确实没有更短的方法可以做到这一点。您不必每次都包含一个fillStyle
,所以它实际上只是一行代码来填充一个像素。
正如 Petteri 指出的那样,还有另一种填充像素的方法,它涉及直接操作像素数据。
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
假设您可以将数据放在一个数组中,然后根据需要循环遍历该数组和颜色。
关于html - 将单个像素插入 HTML5 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7569455/