如何使用 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 中水平翻转?(也许通过使用画布?)

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);
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屋！