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

在IE中，我可以使用:

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

实现水平翻转图像。

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

谢谢大家:)

最佳答案

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

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

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

这是另一个具有更多详细信息的站点。 http://andrew.hedges.name/widgets/dev/