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

授予您可以将数据放入数组中，并根据需要循环遍历该颜色。

Answer 2

您可以直接编辑画布的图像数据。以下是如何执行此操作的一个很好的示例：http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/

Answer 3

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

正如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);

哪个可以实现你想要的。这不是太阳下最有效的方式，但它会实现你的目标：）

Answer 4

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

有人这样做了：P

将单个像素插入HTML5画布

4 个答案: