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不受转换矩阵的影响。

这是由规范的命令：

当前路径、变换矩阵、阴影属性、全局 alpha、裁剪区域和全局合成运算符不得影响 getImageData（） 和 putImageData（） 方法。

您可以做的是putImageData内存中的画布，然后

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

到常规画布上，翻译将应用于 drawImage 调用。

Answer 2

将图像及其关联数据放入自定义数据结构中。例如：

var obj = {
    imgData: someData,
    position: [0, 0],
    translate: function (x, y) {
        this.position[0] = x;
        this.position[1] = y;
    }
};

现在，您可以对imgData及其位置进行连续更新。绘制时，使用 obj.position[0] 和 obj.position[1] 作为 xy 坐标。

obj.translate(200, 10);