JavaScript/canvas


drawImageで描くcanvasの画像を左右反転させる

imageをdrawImageでcanvasに転写する際に左右反転させたい。
[E](img) ⇒ [ヨ](canvas) ←こういうことをしたかった
調べてみたところこれでできるっぽかったのでその通りやってみたが、ChromeではうまくいくがSafariではうまくいかない(反転されない)。
なぜブラウザで動作が異なるのかは謎だが、translate使ってマイナス指定したらうまくいった。
ctx.scale(-1,1);
ctx.translate(-canvas.width, 0);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
これならChromeでもSafariでもどちらでも動作する。

  • 最終更新:2019-04-24 14:43:59

このWIKIを編集するにはパスワード入力が必要です

認証パスワード