Canvas に回転した画像を表示するサンプルページを作りました

Canvas に回転した画像を表示するサンプルページを作りました。

Canvas の標準の機能では用意されていない操作なので、自分でこの処理を書く場合は少々面倒な記述が必要になります。

1. スクリーンショット

2. デモページ

以下のURLで実際のページを見ることができます。

3. 内容

• いろいろな角度に回転した画像を表示しています。
• 回転した画像を Canvas に表示するコード例と、その解説を載せています。
• 画像に “Ca” と書いてありますが、これは “Canvas” を意味しています。

4. ソースコード

• laboradian/rotate-image-on-canvas-sample001

5. 参考情報

• HTML Standard
• CanvasRenderingContext2D.drawImage() – Web APIs | MDN
• 画像を使う – ウェブデベロッパーガイド | MDN
• Day 10 – Drawing rotated images into canvas | CreativeJS
• <canvas>: The Graphics Canvas element – HTML: Hypertext Markup Language | MDN
  • 「一般的に、アクセシビリティに配慮したウェブサイトやアプリではキャンバスを使用しないでください。」