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

标签 html canvas

在 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);
canvasContext.drawImage(image, 0, 0);

这是用于测试的 sprite 对象的片段,它产生了您似乎期望的结果。

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

关于html - 如何使用 HTML5 水平翻转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3129099/

相关文章:

javascript - jQuery:选中一个文本输入框

python BeautifulSoup查找span id名称而不使用string\re方法

java - Android 中的 Squircle 与 Java Canvas

javascript - 如何旋转和调整 Canvas 大小,同时保持旋转的纵横比并调整高度?

javascript - 使用 toDataURL 编写从 Canvas 生成的 png,然后通过 NodeJS/Express 中的 XMLHttpRequest 发送

javascript - 为什么我的 onclick 事件不显示我的 JSON 文件?

php - 将多个css文件导入到php header 中

html - 在我选择下一张之前,我的图像 slider 不显示第一张图片

javascript - 图像上的圆 Angular 边缘

css - Chrome 100% 宽度和 100 vw 溢出