旋转画布上的putImageData（）工作不正确

Question

我需要在画布上绘制旋转的图像数据。 （这是一个gwt项目，上下文是com.google.gwt.canvas.dom.client.Context2d的实例）

我尝试使用以下代码：

context.rotate(rotation);
context.putImageData(data, x, y);
context.rotate(-rotation);

但它画的不是旋转的图像。如果我改变这样的代码

context.rotate(rotation);
context.fillRect(x, y, 100, 50);
context.rotate(-rotation);

将在画布上绘制旋转的矩形。它是API错误，还是我的错误？我该怎么做才能纠正它？

编辑我尝试使用drawImage（）与其他图像而不是putImageDate（）来测试它是如何工作的。它适用于旋转精细。但我需要绘制ImageData，而不是从其他画布中获取。是否有将ImageData转换为ImageElement的快速方法？ ImageData以什么单位返回其大小？

Answer 1

putImageData不受转换矩阵的影响。

这是由Spec的订单：

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

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

context.rotate(rotation);
context.drawImage(inMemoryCanvas, x, y)
context.rotate(-rotation);

在你的普通画布上。

注意：从您的编辑中，您似乎暗示您可能只是从一个画布绘制到另一个画布而不更改任何图像数据。如果是这种情况，请尽可能使用drawImage(othercanvas, x, y)而不是使用getImageData和putImageData。使用drawImage要快得多。