CanvasRenderingContext2D.fillStyle

この記事は翻訳が完了していません。この記事の翻訳にご協力ください

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色を生成するために使用し、また赤色と緑色の値だけを変更するようにします (青色は固定値とします) 。チャンネルを変更することによって全ての種類のパターンを生成することができます。

<canvas id="canvas" width="150" height="150"></canvas>

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 の定義	現行の標準

ブラウザー実装状況

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`fillStyle`	Chrome 完全対応あり	Edge 完全対応 12	Firefox 完全対応 1.5	IE 完全対応あり	Opera 完全対応あり	Safari 完全対応あり	WebView Android 完全対応あり	Chrome Android 完全対応あり	Firefox Android 完全対応 4	Opera Android 完全対応あり	Safari iOS 完全対応あり	Samsung Internet Android 完全対応あり

凡例

完全対応: 完全対応

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);

構文