html - 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);