「Webページで絵を描く2つの方法」で、SVGとCanvas APIの違いを書きました。
今回は、筆者が小さい頃から好きな科学館のように、実際に体験できる記事をコンセプトに書いてみました。
コードの中の数字や色を書き換えて「実行」を押すと、目の前の結果がすぐ変わります。気軽に触ってみてください。
SVGの世界
展示1 ― 円を描く
中心の位置（cx, cy）と半径（r）、塗りの色（fill）を指定します。数字を変えて実行してみてください。
コード（自由に書き換えてOK）
結果
展示2 ― 図形を組み合わせて家を描く
三角形（polygon）で屋根、四角形（rect）で壁とドア。座標や色を変えると形が変わります。
コード（自由に書き換えてOK）
結果
展示3 ― グラデーションで空を描く
色の変化（linearGradient）を定義して、四角に適用しています。stop-colorの値を変えると空の色が変わります。
コード（自由に書き換えてOK）
結果
展示4 ― アニメーションする円
animateタグで半径を変化させています。valuesの数字を変えると動き方が変わります。
コード（自由に書き換えてOK）
結果
Canvas APIの世界
展示5 ― 円と四角を塗る
コード中の数字や色コードを変えて実行すると、図形の位置や色が変わります。
コード（自由に書き換えてOK）
結果
展示6 ― 放射状の線を描く
ループで12本の線を引いています。12を別の数に変えると本数が変わります。
コード（自由に書き換えてOK）
結果
展示7 ― 往復する円（アニメーション）
clearRectで全部消して、位置をずらして描き直す。これを繰り返すとアニメーションになります。速さ（dx）や円の大きさ（radius）を変えてみてください。
コード（自由に書き換えてOK）
結果
まとめ
- SVGは形の指示を文字で書く。タグの中の数字を変えると図形が変わる
- Canvas APIはプログラムで塗る手順を書く。計算しながら描いたり、繰り返し描き直してアニメーションを作ったりできる
- どちらも「コードを変える → 結果が変わる」を自分の手で試せる
仕組みの解説は「Webページで絵を描く2つの方法」にまとめています。