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调用。

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

HTML5 Canvas putImageData，翻译它，改变Image

2 个答案: