在HTML5画布中设置单个像素的最佳方法是什么?

HTML5 Canvas没有显式设置单个像素的方法。

可以使用非常短的行设置像素，但反字符和行大写可能会干扰。

另一种方法可能是创建一个小的ImageData对象，并使用:

context.putImageData(data, x, y)

把它放在合适的位置。

有人能描述一种高效可靠的方法吗?

当前回答

长方形呢?这比创建ImageData对象更有效。

2011-02-04 16:35:37

其他回答

嗯，你也可以只做一个1像素宽的线，长度为1像素，让它的方向沿着一个轴移动。

            ctx.beginPath();
            ctx.lineWidth = 1; // one pixel wide
            ctx.strokeStyle = rgba(...);
            ctx.moveTo(50,25); // positioned at 50,25
            ctx.lineTo(51,25); // one pixel long
            ctx.stroke();

2013-03-14 11:33:58

一种没有提到的方法是使用getImageData，然后使用putImageData。这种方法很适合当你想要画很多的时候，快速。 http://next.plnkr.co/edit/mfNyalsAR2MWkccr

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
var id = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
var pixels = id.data;

var x = Math.floor(Math.random() * canvasWidth);
var y = Math.floor(Math.random() * canvasHeight);
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var off = (y * id.width + x) * 4;
pixels[off] = r;
pixels[off + 1] = g;
pixels[off + 2] = b;
pixels[off + 3] = 255;

ctx.putImageData(id, 0, 0);

2018-07-08 10:33:58

function setPixel(imageData, x, y, r, g, b, a) {
    var index = 4 * (x + y * imageData.width);
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}

2016-02-29 00:09:50

长方形呢?这比创建ImageData对象更有效。

2011-02-04 16:35:37

像sdleihssirhc说的那样画一个矩形!

ctx.fillRect (10, 10, 1, 1);

^——应该在x:10, y:10处画一个1x1的矩形

2011-02-04 16:45:07

在HTML5画布中设置单个像素的最佳方法是什么?

推荐文章

最新文章

标签