PR
連載: 

着色とアルファとグラデーション

2008年5月15日(木)
羽田野 太巳

線の色を指定するstrokeStyleプロパティ

今回は、Canvasに描いた線や図形に好きな色を指定する方法を解説していきます。これまで、Canvasに線を描く場合はstrokeメソッドを、図形を塗りつぶす場合はfillメソッドを使ってきましたが、Canvasに表示される色はすべて黒でした。これは、Canvasで描かれる図形のデフォルト色が黒となってるためです。
 →今回のサンプルコード(zip形式/47.4KB)

Canvasでは、色を指定するために、fillStyleプロパティとstrokeStyleプロパティが規定されています。strokeメソッドやfillメソッドを呼び出す前に、これらのプロパティに色をセットします。

では、strokeStyleプロパティとfillStyleプロパティについて、詳しく見ていきましょう。まずは、strokeStyleプロパティです。

strokeStyleプロパティは、パスで定義された線の色を定義するプロパティです。strokeStyleプロパティで指定できる色とは、スタイルシートで使われる色と同じです。「#ff0000」「red」「rgb(255,0,0)」といった方法で指定することができます(リスト1)。次に、fillStyleプロパティについて解説していきましょう。

fillStyleプロパティは、パスで定義された図形の色を定義するプロパティです。fillStyleプロパティで指定できる色とは、スタイルシートで使われる色と同じです。「#ff0000」「red」「rgb(255,0,0)」といった方法で指定することができます(リスト2)。

図1は前述のサンプルのstrokeStyleをfillStyleに、stroke()をfill()に変更したものです。Canvasでは描いた順番に、上に重ねて描かれます。


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

指定した色の適用範囲

これまでのサンプルでは、図形(円)ごとにfillStyleを使って色を指定してきました。しかし、数多くの図形を組み合わせる場合、これらのプロパティ値が、どの図形に適用されるかを理解しなければいけません。

strokeStyleやfillStyleが2Dコンテキスト(ctx)のプロパティであることに注目してください。ctx.strokeStyle、ctx.fillStyleという使い方をしてきましたね。つまり、これらのプロパティは、図形ごとに定義されたプロパティではなく、Canvas全体に定義されたプロパティということになります。

一度、strokeStyleやfillStyleプロパティに色をセットすると、以降、Canvasに描かれる線や図形の色は、変更しない限り、その色のままになります。

例えば、最初に一度だけfillStyleプロパティに「red」を指定し円を描き、その後、fillStyleプロパティに色をセットせずに、残り2つの円を描くと、すべての円が赤色で表示されることになります。

有限会社futomi
代表取締役。CGI/Perl総合サイト「futomi\'s CGI Cafe」を運営。ホスティングサーバ(共用サーバ)でも利用できるウェブアプリケーションの独自開発・販売を手掛ける。主にPerlによるCGI制作が中心。オーダーメードのウェブアプリケーション制作/ウェブサーバ管理業務も手掛ける。http://www.futomi.com/

Think IT会員サービスのご案内

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスのご案内

関連記事