fillStyle フィールド

この記事が対象とする仕様

	HTML5 HTML構文	◎	対象です。
	HTML5 XHTML構文	◎	対象です。

出典：HTML Canvas 2D Context 2012年3月7日 Editor's Draft版 http://dev.w3.org/html5/2dcontext/

図形の内側の塗りつぶしに使用するスタイルを表します。

１．構文

var fillStyle;

パラメーター

なし

２．解説

設定できる値はCSSで定義された色を表す文字列か、CanvasGradientオブジェクトまたはCanvasPatternオブジェクトです。その他の値を指定しても無視されフィールドの値は変更されません。初期値は "#000000" つまり、黒です。

単色の指定にはCSSで定義された色を文字列で指定します。rgba形式でアルファ値を含む文字列を指定することで半透明を表現することもできます。

CSSで定義されている色の詳細はCSSCOLORを参照してください。

以下に有効な値の一例を示します。

red
rgb(0,0,255)
rgba(0,0,255,0.5)
#00ff00
Scrollbar

これらの値は文字列として引用符をつけて fillStyle = 'rgb(0,0,255)' のように記述します。値の設定を行った形式に関わらず値を取得する際は常に#xxxxxxのような形式に変換されたものを取得できます。

グラデーションを指定するにはCanvasGradientオブジェクトを指定します。線形グラデーションと放射状のグラデーションの両方が実現できます。

テクスチャを指定するにはCanvasPatternオブジェクトを指定します。テクスチャにはimg要素またはcanvas要素またはvideo要素が使用できます。詳細はCanvasPatternオブジェクトの説明を参照して下さい。

fillStyleで設定したスタイルはfillRectメソッド、fillメソッド、fillTextメソッドで使用されます。

３．例

次の例は赤い四角形を描画します。

fillStyleに単色を設定

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');

//赤い四角形
g.fillStyle = 'red'
g.fillRect(10, 10, 100, 100)

次の例は赤い四角形の上にすこしずらして青い四角形を半透明で重ねます。

fillStyleに半透明を設定

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');

//赤い四角形
g.fillStyle = 'rgb(255,0,0)'
g.fillRect(10, 10, 100, 100)

//半透明の青い四角形
g.fillStyle = 'rgba(0,0,255,0.5)'
g.fillRect(60, 60, 100, 100)

次の例はfillStyleに赤と青のグラデーションを表すCanvasGradientオブジェクトを設定し、グラデーションで塗りつぶされた四角形を表示します。

fillStyleにグラデーションを設定

var Canvas1 = document.getElementById('Canvas1');

var g = Canvas1.getContext('2d');
var gradation = g.createLinearGradient(10, 10, 100, 100);
gradation.addColorStop(0.0, 'red');
gradation.addColorStop(1.0, 'blue');

g.fillStyle = gradation;
g.fillRect(10, 10, 100, 100)

次の例は画像をテクスチャとして使用して円を描きます。

fillStyleにテクスチャを設定

var Canvas1 = document.getElementById('Canvas1');
var g = Canvas1.getContext('2d');
var image = document.getElementById('Image1');
var pattern = g.createPattern(image, 'repeat');

g.fillStyle = pattern;

g.beginPath();
g.arc(70, 70, 50, 0, Math.PI * 2, false);
g.fill();

４．プラットフォーム

HTML5

IE9