Canvas 2D API のCanvasRenderingContext2D
.fillStyle
プロパティは、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。デフォルト値は #000
(黒色)です。
輪郭と塗りつぶしのスタイル例については、 canvas チュートリアルの スタイルと色を適用する をご覧ください。
構文
ctx.fillStyle = color; ctx.fillStyle = gradient; ctx.fillStyle = pattern;
オプション
color
- CSS の
<color>
として解析されるDOMString
。 gradient
CanvasGradient
オブジェクト (線形または放射状のグラデーション) 。pattern
CanvasPattern
オブジェクト (繰り返し画像) 。
例
図形の塗色を変更する
このサンプルでは青色の塗色を矩形に適用します。
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
Result
ループを使用した複数の塗色の作成
この例では2つの for
ループでそれぞれが異なる塗色を持つ四角形のグリッドを描画します。 このためには、2つの変数 i
と j
を四角形ごとに固有となるRGB色を生成するために使用し、また赤色と緑色の値だけを変更するようにします (青色は固定値とします) 。チャンネルを変更することによって全ての種類のパターンを生成することができます。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx.fillStyle = `rgb(
${Math.floor(255 - 42.5 * i)},
${Math.floor(255 - 42.5 * j)},
0)`;
ctx.fillRect(j * 25, i * 25, 25, 25);
}
}
結果はこのようになります:
Screenshot | Live sample |
---|---|
![]() |
仕様
Specification | Status | Comment |
---|---|---|
HTML Living Standard CanvasRenderingContext2D.fillStyle の定義 |
現行の標準 |
ブラウザー実装状況
BCD tables only load in the browser
WebKit/Blink特有のメモ
WebKit および Blinkベースのブラウザの場合、このプロパティに加えて、非標準で非推奨のメソッド ctx.setFillColor()
が実装されています。
setFillColor(color, optional alpha);
setFillColor(grayLevel, optional alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);
関連情報
- Canvas API
- このプロパティを定義しているインターフェース:
CanvasRenderingContext2D
- このプロパティで使われる値:
<color>
CSS data typeCanvasGradient
objectCanvasPattern
object