HTML5 Canvas putImageData,翻译它,改变Image

Question

我想使用HTML5画布绘制图像,翻译图像然后更改图像,但保留我所做的转换.这可能吗？

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

// 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的订单:

当前路径,变换矩阵,阴影属性,全局alpha,剪切区域和全局合成运算符不得影响getImageData()和putImageData()方法.

你可以做的是putImageData内存画布,然后

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

在常规画布上,翻译将应用于drawImage调用.