1. ホーム
  2. html

[解決済み] HTML5で画像を水平に反転させる方法

2022-02-10 18:04:46

質問

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

テストに使用されているスプライトオブジェクトのスニペットを示しますが、期待通りの結果が得られます。

こちらも詳細なサイトです。 http://andrew.hedges.name/widgets/dev/