javascript - 如何使用 HTML5 水平翻转图像

Question

在 IE 中，我可以使用:

<img src="http://example.com/image.png" style="filter:FlipH">

实现图像水平翻转。

HTML5有没有办法实现水平翻转？ (也许通过使用 Canvas ？)

谢谢大家:)

Answer 1

canvas = document.createElement('canvas');
canvasContext = canvas.getContext('2d');

canvasContext.translate(width, 0);
canvasContext.scale(-1, 1);
canvasContext.drawImage(image, 0, 0);

这是用于测试的 Sprite 对象的片段，它会产生您似乎期望的结果。

这是另一个提供更多详细信息的网站。 http://andrew.hedges.name/widgets/dev/