HTML5 Canvas putImageData，翻译它，改变图像

Question

我想使用 HTML5 Canvas 绘制图像，转换图像，然后更改图像但保留我所做的转换。这可能吗？

这里有一些伪代码来说明我的问题:

// initially draw an image and translate it
var context = canvas.getContext("2d");
context.putImageData(someData, 0, 0);
context.translate(200, 10);


// then later somewhere else in code
// this should be drawn @ 200/10
var context = canvas.getContext("2d");
context.putImageData(someOtherData, ?, ?);

我认为这可以通过一些保存/恢复调用来实现，但我还没有成功，那么我该如何实现呢？

Answer 1

这里的问题是 putImageData 不受变换矩阵的影响。

这是 Spec 的命令:

The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

你可以做的是 putImageData 到内存中的 Canvas ，然后

inMemCtx.putImageData(imgdata, 0, 0);
context.drawImage(inMemoryCanvas, x, y)

到您的常规 Canvas 上，翻译将应用于 drawImage 调用。