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

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

結果はこのようになります:

ScreenshotLive sample

仕様

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.fillStyle の定義
現行の標準

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
fillStyleChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera 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);

関連情報