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

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 Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています