簡単な図を描いてみよう！

図形を塗りつぶす

これまでは線を描くだけでしたが、ここでは図形を塗りつぶす方法を解説していきます。

線を描く際には、パスを定義した後にstrokeメソッドを呼び出しました。しかし、パスで定義した図形を塗りつぶす場合は、strokeメソッドの代わりにfillメソッドを呼び出します。

図3は、前ページで使った円弧を描くサンプルのstrokeメソッドをfillメソッドに置き換えたものです。

画像をクリックすると拡大します

2つ目と3つ目の図形が同じになっている点に注目してください。2つ目は円弧を描き、図形を直線で閉じずにパスを定義したものです。しかし、fillメソッドを呼び出して図形を塗りつぶすと、図形を直線で閉じた3つ目と同じになります。このように、fillメソッドで図形を塗りつぶす場合、あたかもclosePathメソッドで図形を閉じたかのように振る舞う点に注意してください。

矩形の特別なメソッド

これまでパスを使った図形の描き方を学んできましたが、矩形に関しては、パスを使わない描画方法が用意されています。

「fillRect(x, y, w, h)」は塗りつぶした矩形を描きます。

「strokeRect(x, y, w, h)」は矩形を線で描きます。

「clearRect(x, y, w, h)」は該当の矩形部分をクリアします。

上記3つのメソッドには4つの引数を与えます。xとyはそれぞれ矩形の左上の座標です。wとhはそれぞれ矩形の横幅と縦幅です。

これらのメソッドはパスを使いません。そのため、beginPathメソッドやfillメソッド、strokeメソッドを呼び出す必要はありません。

これらのメソッドは、非常に簡単に矩形が描けるため、重宝するメソッドです。特に、clearRectメソッドは、Canvasに描かれた図形をすべてクリアする際に、よく使われます。

canvas要素にwidth属性とheight属性がセットされていることが前提となりますが、clearRectメソッドを使ってCanvas全体をクリアする際には、横幅と縦幅にparseInt(canvas.width)とparseInt(canvas.height)を指定してください。そうすることで、HTML側でcanvas要素のwidth属性とheight属性が変更された場合でも、適切にCanvas全体をクリアすることができます。

今回は図を描く方法について学んできましたが、線や塗りがすべて黒でしたので、やや面白みに欠けたかもしれません。しかし、本格的にCanvasで図を描くためには必須の知識となりますので、しっかりと理解してください。
　→今回のサンプルコード（zip形式/39.3KB）

次回は、描いた図形に色を指定するテクニックを解説していきます。