javascript - 如何使用 putImageData 和 Canvas 绘制一个点？

Question

我正在处理复杂的任务，所以我的问题不应该真正有意义，但问题是如何使用putImageData以前通过getImageData.

假设我有一条 200 像素的水平线A (0, 0) - B (199, 0)。我可以使用读取它的像素颜色信息

var pixels = ctx.getImageData(0, 0, 200, 1); // horizontal line :: 200 pixels

但是一旦我有了pixels数组(pixel.length = 800)，我想在不同的地方从这条线上画一些点。只是点，不是线。

这将绘制整条线：

ctx.putImageData(pixels, 20, 20);

但是我怎样才能从线A - B的第 n 个点用像素颜色信息绘制一个点 C (20, 20)？

如何使用来自的数据putImageData与 rgba 数组（array.lenght = 4）一起使用pixels？

score 1 · Accepted Answer

putImageData有另一组参数，一个脏矩形：

putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

有了这个，您可以在图像数据中指定一个矩形来复制回来。它只会将该矩形中的像素复制回画布。

因此，正如您所说，这将为您提供水平线：

var pixels = ctx.getImageData(0, 0, 200, 1); // horizontal line :: 200 pixels

这会将(20,0)图像数据中的一个像素放在(20,0)画布中的位置：

ctx.putImageData(pixels, 0, 0, 20, 0, 1, 1)

请注意，您仍然必须从 0,0 开始 x/y 偏移，这是因为脏矩形的工作方式。您不会将 (20,0) 处的一个像素放回 (0,0) 处，而是将整个图像数据放回 (0,0) 处，但除了脏矩形。这使得

1 回答 1