前の記事「Webページを作っている3つの仕組み」で、HTML・CSS・JavaScriptの話をしました。
今回はその続きです。Webページの中に「絵」を描く方法が2つあります。SVGとCanvas API。「全力の静的サイトを作ってみた」に出てきたイラストやパーティクルの演出は、写真のような画像ファイルを使っていません。ブラウザの中で、コードから直接描いたものです。その描き方が2種類あるんです。
まず「画像ファイル」の話から
普段見ている写真やイラストの多くは、画像ファイルとしてWebページに貼り付けてあります。スマホで撮った写真をそのまま載せるようなものです。
画像ファイルの中身は、小さな色の点がぎっしり集まったものです。拡大するとその点が見えてきて、ぼやけます。カメラで撮った写真を何倍にも引き伸ばすとぼけるのと同じことです。
SVGとCanvas APIは、どちらも画像ファイルを使いません。ブラウザが「今この瞬間に」絵を描きます。
SVG ― 「形の指示書」で描く
日本語にすると「拡大しても荒くならない図形描画」。正式には「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略です。
ブラウザに対して形の指示を出します。「ここに半径50の円を描いて、青く塗って」「ここからここまで線を引いて」と、文字で指示を書く。ブラウザがその指示通りに画面上へ図形を描く。
実際のコードはこうです。
<svg width="200" height="120">
<circle cx="60" cy="60" r="40" fill="#4a90d9" />
<rect x="120" y="20" width="60" height="80" fill="#e07850" />
</svg>「中心が(60,60)で半径40の円を青く塗る」「左上が(120,20)で幅60・高さ80の四角をオレンジに塗る」と書いてあります。ブラウザで表示するとこうなります。
画像ファイルではありません。テキストで書いた座標と色の指定だけで、この図形が出ています。テキストなので拡大してもぼやけない。画面が大きくなっても小さくなっても、その都度きれいに描き直してくれます。
- アイコンを表示する（ホームのマーク、虫眼鏡のマークなど）
- ロゴを表示する
- シンプルなイラストや図表を描く
- 図形にアニメーションをつける
「全力の静的サイト」にあった、パソコンの画面とネットワークのイラスト。あれは全部SVGです。画像ファイルはゼロ。「ここに四角を描く」「ここに線を引く」「この円を点滅させる」という指示の集まりで、あの絵が出ていました。
身近なところだと
スマホの天気アプリに並んでいる太陽や雲のアイコン。ああいう図形はSVGで描いていることが多いです。画面サイズが違うスマホでも、タブレットでも、拡大しても輪郭がくっきりのまま。写真のようにぼやけることがありません。
Canvas API ― 「1点ずつ塗って」描く
Canvasは日本語で「画布（キャンバス）」、APIは「プログラムから呼び出せる機能の窓口」です。
画面の中に白い画布を用意して、プログラムで1点ずつ色を塗っていきます。絵の具で白紙に絵を描くのに近い。
実際のコードはこうです。
<canvas id="demo" width="200" height="120"></canvas>
<script>
var ctx = document.getElementById('demo').getContext('2d');
// 青い円を塗る
ctx.fillStyle = '#4a90d9';
ctx.beginPath();
ctx.arc(60, 60, 40, 0, Math.PI * 2);
ctx.fill();
// オレンジの四角を塗る
ctx.fillStyle = '#e07850';
ctx.fillRect(120, 20, 60, 80);
</script>見た目はさっきのSVGと同じです。
同じ結果ですが、やり方がまったく違います。SVGは「円を描いて」と指示を残す。Canvas APIは「この位置を青く塗れ」とプログラムで1点ずつ塗っていく。
SVGとの違いは、描き終わった後に出てきます。
SVGは「円を描いて」という指示が残っているので、後から「その円を赤に変えて」「右に動かして」と個別に操作できます。部品が1つ1つ独立しています。
Canvas APIは、塗り終わった瞬間に1枚の絵になります。「さっき描いた円だけ動かす」ということはできません。すでに絵の具が乾いた状態です。動かしたければ、全体を白く塗りつぶして、位置を少しずらしてもう一度描き直す。
「それだと手間がかかるのでは？」と思うかもしれません。実は、この「全部消して描き直す」を毎秒何十回も高速に繰り返しています。パラパラ漫画と同じ仕組みです。1枚1枚は止まった絵。でも高速にめくると動いて見える。
- ブラウザで動くゲームの画面を描く
- 大量の粒が飛び散る演出を作る
- リアルタイムに変化するグラフを表示する
- お絵描きツールの描画面を作る
「全力の静的サイト」で、画面を押すと粒が飛び散った「生成アート」。あれがCanvas APIです。毎秒数十回、すべての粒の位置を計算して描き直している。だから滑らかに動いて見えます。
身近なところだと
ブラウザで遊べるゲーム ― 落ちものパズルやシューティング。キャラクターや弾が動くたびに、画面全体を高速に描き直しています。あの滑らかさはCanvas APIの「塗り直しの速さ」で出ています。
2つの違いを並べてみる
- SVG ― 形の指示を文字で書く。拡大してもぼやけない。描いた部品は後から個別に動かせる。アイコンやイラスト向き
- Canvas API ― プログラムで1点ずつ塗る。描いたものは1枚の絵になる。高速に描き直すことで動きを表現する。ゲームや演出向き
どちらも「ブラウザの中でコードから絵を描く」技術ですが、得意な場面が違います。くっきりしたアイコンを表示したいならSVG。毎秒何十枚も描き直して滑らかに動かしたいならCanvas API。そういう使い分けです。
まとめ
- Webページに絵を描く方法は、画像ファイルを貼る以外に2つある
- SVGは形の指示を文字で書く方法。拡大してもぼやけない。アイコンやイラストに向いている
- Canvas APIは画面を1点ずつ塗る方法。高速に描き直すことで滑らかな動きを作る。ゲームや演出に向いている
- 2つは得意な場面が違い、目的に応じて選ぶ