logo标签列表

在HTML5画布中插入单个像素

htmlcanvaspixel
3
我想插入带有颜色的像素，我使用以下代码：

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

有没有更短的方法？比如一行代码就能实现？ 我的主要目标是减少代码量。
你可以修改原型来构建一个fillPixel()函数。除了制作一个辅助函数之外，这是唯一的更短的方法。 Canvas并不是为逐像素绘制而设计的。 - Overcode
4个回答
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次，每个颜色组件都需一次。例如，要设置红、绿、蓝和透明度，您需要使用：

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

如果你的数据可以存储在一个数组中，那么只需要循环遍历数组并根据需要进行着色即可。

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

有人用那个做了 :P

0

不，没有一行代码可以直接将单个像素更改为一种颜色的方法。嗯，有点类似。

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

这样做可以实现你想要的目标。虽然不是最高效的方法，但它可以达到你的目标 :)

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接