HTML5 Canvas putImageData，翻译它，改变Image [英] HTML5 Canvas putImageData, translate it, change Image

问题描述

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

I want to draw an image using a HTML5 canvas, translate the image and then change the image but keep the transformations I've made. Is this possible?

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

Here's some pseudo-code to illustrate my problem:

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

我认为这可能通过一些保存/恢复调用，但我还没有成功，我可以实现这个吗？

I thought this would be possible by some save/restore calls but I did not succeed yet, so how can I achieve this?

推荐答案

这里的问题是 putImageData 不受转换矩阵的影响。

The problem here is that putImageData is not affected by the transformation matrix.

这是由Spec的订单：

This is by the Spec's orders:

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

The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

您可以对内存画布执行 putImageData ，然后

What you can do is putImageData to an in-memory canvas, and then

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

翻译将应用于drawImage调用。

onto your regular canvas, and the translation will be applied to the drawImage call.

这篇关于HTML5 Canvas putImageData，翻译它，改变Image的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！