如何使用putImageData与Canvas绘制点？

Question

我正在处理复杂的任务，所以我的问题不应该是真正意义上的问题，但问题是如何使用putImageData绘制点的颜色信息以及之前通过getImageData获取的点的颜色信息。

假设我有一条200px水平线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); 

但如何可以得出只是一个点C（20，20）与像素的颜色信息从第n点的直线的A - B？

如何使用putImageData与RGBA 的阵列（array.lenght = 4）使用来自pixels数据？

Answer 1

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）开始重新放回，但不要复制任何一个像素，除了脏的矩形。这使得