如何使用HTML5水平翻转图片 [英] How to flip images horizontally with HTML5

问题描述

在IE中，我可以使用：

In IE, I can use:

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

可实现水平翻转。

有没有什么办法在HTML5中水平翻转？ （可以使用canvas？）

Is there any way to flip horizontally in HTML5? (maybe by using canvas?)

感谢所有：）

推荐答案

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

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

这是一个来自sprite对象的代码片段，用于测试，它产生你所期望的结果。

Here's a snippet from a sprite object being used for testing and it produces the results you seem to expect.

这里是另一个有更多细节的网站。 http://andrew.hedges.name/widgets/dev/

Here's another site with more details. http://andrew.hedges.name/widgets/dev/

这篇关于如何使用HTML5水平翻转图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！