将一张像素为HTML5画布

Question

我想插入一个像素一个颜色，我用这个代码：

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

有一个较短的方式做到这一点？例如在一行代码中？ 我的主要目标是减少代码量。

Answer 1

fillStyle="rgb("+a[m]; 
fillRect(m,o,1,1); 

有人做与：P

Answer 2

您可以直接编辑画布的图像数据。下面是一个很好的例子：http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/

Answer 3

除了上面使用的方法之外，确实没有更简单的方法。你不需要每次都包含以包含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次，一次颜色的每个组件的上述方法。例如：将红色，绿色，蓝色和阿尔法你会使用

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 

授予你可以在一个阵列数据，并通过刚刚循环和颜色需要。

Answer 4

不，没有单行代码方式可将单个像素更改为一种颜色。那么，就是那种。

正如Petteri指出的那样，有一种方法可以直接更改每个像素，这可能会达到您想要的效果。我想你想要的是一个像素更改为一种颜色，而下一个像素到另一种颜色，等

例如这里是去饱和画布功能。它所做的是将每个像素和RGB值平均化为色彩中性（没有饱和度）。结果是灰度图像。

function grayscale() { 
    var imageData = ctx.getImageData(0,0,can.width, can.height); 
    var pixels = imageData.data; 
    var numPixels = pixels.length; 

    ctx.clearRect(0, 0, can.width, can.height); 

    for (var i = 0; i < numPixels; i++) { 
     var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3; 
     // set red green and blue pixels to the average value 
     pixels[i*4] = average; 
     pixels[i*4+1] = average; 
     pixels[i*4+2] = average; 
    } 
    ctx.putImageData(imageData, 0, 0); 
} 

正如你所看到的，它遍历每个像素。可以轻松地将每个像素更改为单线。

相反的：

pixels[i*4] = average; 
pixels[i*4+1] = average; 
pixels[i*4+2] = average; 

你会写：

// Take out 3 values starting at i*4 and add the new RGB for that pixel 
pixels.splice(i*4,3,REDVALUE,GREENVALUE,BLUEVALUE); 

这将完成你想要的东西。这不是天底下最有效的方式，但它会实现你的目标:)