html5 の Canvas を使ってみる

html5 では Canvas という、Flash はもう用済みなのでは、と巷で騒がれているほどのものが定義されている。まぁまだ Flash の方が使いやすいと思うけど、今後に期待という感じか。SVG の精神を受け継いでいるような雰囲気なので、SVG をやったことのある人はとっつき易い・・・かもしれない。

そこで、実際に Canvas を使ってみて、やってみたもん順に紹介していきたいと思う。

1. 線を引く(lineTo)


2. 円を描く(arc)


3. 線を閉じる(closePath)


4. 扇形を作る(moveTo+arc+closePath)


5. 弧を描く(arcTo)


6. 矩形を描く(rect)


7. 色で塗る(fillStyle)


8. 線に色を塗る(strokeStyle)


9. 星形を描く(lineTo+closePath)


10. 線の太さを変える(lineWidth)


11. 線の両端のスタイルを変える(lineCap)


12. 線の接続点のスタイルを変える(lineJoin)


13. 影を付ける(shadowBlur)


14. 影に色を付ける(shadowColor)


15. 影の位置を指定する(shadowOffsetX・shadowOffsetY)


16. 透明度をまとめて指定する(globalAlpha)


17. 線形のグラデーションを付ける(createLinearGradient、addColorStop)


18. 円形のグラデーションを付ける(createRadialGradient、addColorStop)


19. 図形を拡大・縮小する(scale)


20. 図形を移動する(translate)


21. 図形を回転する(rotate)


22. 塗りつぶしテキストを書いてみる(fillText)


23. 枠線でできたテキストを書いてみる(strokeText)


24. テキストの色を変える(fillStyle・strokeStyle)


25. テキストの最大表示幅(MaxWidth)を指定する(fillText・strokeText)


26. テキストの方向を指定する(textAlign)


27. テキストのスタイルを変更する(font)


28. テキスト描画の基準位置を変更する(textBaseLine)


29. 画像を読み込む(drawImage)


30. 読み込んだ画像の一部を切り貼りする(getImageData・putImageData)


31. 読み込んだ画像にマスクをかける(clip)


32. 四角形で指定した矩形を削除する(clearRect)


33. 画像を背景として設定する(createPattern)


34. 描画スタイルをスタックへ保持、取り出す(save・restore)


35. 直線接続点を miter とする限界を設定する(miterLimit)


36. Illustrator のような三次ベジェ曲線を描く(bezierCurveTo)


37. Illustrator のような二次ベジェ曲線で角丸の四角や微妙な円を描く(quadraticCurveTo)


38. 指定した座標が描画された範囲に入っているか調べる(isPointInPath)


39. 塗りつぶし矩形を描く(fillRect)


40. 枠を塗った矩形を描く(strokeRect)


41. 重ねた画像の表示の仕方を指定する(globalCompositeOperation)


42. 矩形に変換マトリクスを加える(transform)


43. 矩形に新規変換マトリクスを加える(setTransform)


44. Canvas 下地の描画範囲を設定する(width・height)


45. Canvas でローディングイメージ（読み込み中の画像）のアニメーションを作成する