HTML5画布putImageData，平移并更改图像

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, ?, ?);

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

- krinklesaurus

Answer 1

问题在于putImageData不受转换矩阵的影响。

这是按规范的规定：

当前路径、变换矩阵、阴影属性、全局透明度、剪辑区域和全局组合模式不能影响getImageData()和putImageData()方法。

您可以将putImageData放到内存画布中，然后

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

将其应用到drawImage调用中，即可在常规画布上绘制已转换的图像。

- Simon Sarris

---

谢谢大家。问题是两种方法都需要跟踪x/y坐标，而我想避免这种情况。我更喜欢一种方式，即对新图像应用所有变换。我考虑过获取变换矩阵，设置新图像并再次将矩阵应用于画布，但这不可能吧？如果我的第一篇帖子有误导之处，请见谅。 - krinklesaurus

有没有办法从getDataImage创建图像，然后使用drawImage？ - Nikola Lukic

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

- bennedich