CanvasRenderingContext2D.fillStyle - 塗りつぶしのスタイル(色)を指定する

投稿日:2016/03/03 / 更新日:2016/03/03

JavaScriptの、CanvasRenderingContext2DオブジェクトのfillStyleは、塗りつぶしのスタイル(色)を取得、変更するためのプロパティです。スタイルを設定した後は、別途、fill()メソッドを使って実際に塗りつぶさないと意味がありません。値には、CSSで許可された指定方法で色、グラデーションのCanvasGradientオブジェクト、またはCanvasPatternオブジェクトの3種類の中からどれかを指定できます。

サンプルコード

<canvas id="target"></canvas>

// キャンパス要素を取得
var canvas = document.getElementById( "target" ) ;

// 二次元グラフィックスのコンテキスト(CanvasRenderingContext2D)を取得
var context = canvas.getContext( "2d" ) ;

// 塗りつぶしのスタイル(色)を指定する
context.fillStyle = "#d36015" ;

// 塗りつぶしのスタイル(色)を取得する
var fillStyle = context.fillStyle ;

// 設定した内容で塗りつぶしを実行する (応用)
context.rect( 0,0, 200,200 ) ;	// 範囲を決めて
context.fill() ;	// 実行

デモ

ボタンを押すと、fillStyleプロパティに値を設定したり、現在の設定を取得したりできます。プロパティの操作だけでは、描画は実行されません。別途、範囲を決めてfill()メソッドなどを実行する必要があります。このデモではおまけとして「描画」を実行すると、設定した色で描画を実行するようになっています。

RUN
HTML
CSS
JavaScript

<div id="parent"> <canvas id="target"></canvas> </div> <a id="method1" class="menu">#d36015を設定</a> <a id="method2" class="menu">#2660a1を設定</a> <a id="method3" class="menu">CanvasGradientを設定</a> <a id="method4" class="menu">CanvasPatternを設定</a> <a id="method5">取得</a> <a id="method6">描画</a> <a id="method7">リセット</a>

#parent { border: 1px solid #333 ; padding: 18px 0 ; } #target { width: 200px ; height: 200px ; background: #f2f2f2 ; margin: 0 auto ; display: block ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; } code { background: #f2f2f2 ; }

// キャンパス要素を取得 var canvas = document.getElementById( "target" ) ; // キャンパスのサイズ canvas.width = 200 ; canvas.height = 200 ; // 二次元グラフィックスのコンテキスト(CanvasRenderingContext2D)を取得 var context = canvas.getContext( "2d" ) ; // クリックイベント1 document.getElementById( "method1" ).addEventListener( "click", function() { // 塗りつぶしのスタイル(色)を指定する context.fillStyle = "#d36015" ; // ボタンの色 buttonSelect( this, "menu" ) ; } ) ; // クリックイベント2 document.getElementById( "method2" ).addEventListener( "click", function() { // 塗りつぶしのスタイル(色)を指定する context.fillStyle = "#2660A1" ; // ボタンの色 buttonSelect( this, "menu" ) ; } ) ; // クリックイベント3 document.getElementById( "method3" ).addEventListener( "click", function() { // 線形グラデーションのCanvasGradientオブジェクトを取得 var gradient = context.createLinearGradient( 0,0, 200,0 ) ; // addColorStop()を使ってグラデーションの色を調整 gradient.addColorStop( 0, "#d36015" ) ; gradient.addColorStop( 1, "#2660A1" ) ; // 塗りつぶしのスタイル(色)を指定する context.fillStyle = gradient ; // ボタンの色 buttonSelect( this, "menu" ) ; } ) ; // クリックイベント4 document.getElementById( "method4" ).addEventListener( "click", function() { // CanvasPatternオブジェクトを作成 var pattern = context.createPattern( imageElement, "repeat" ) ; // 塗りつぶしのスタイル(色)を指定する context.fillStyle = pattern ; // ボタンの色 buttonSelect( this, "menu" ) ; } ) ; // クリックイベント5 document.getElementById( "method5" ).addEventListener( "click", function() { // 取得 var fillStyle = context.fillStyle ; // 出力 this.textContent = "取得→" + fillStyle ; } ) ; // クリックイベント6 document.getElementById( "method6" ).addEventListener( "click", function() { // 塗りつぶしの範囲を決める context.rect( 0,0, 200,200 ) ; // 塗りつぶしを実行 context.fill() ; } ) ; // リセット document.getElementById( "method7" ).addEventListener( "click", function() { // キャンパスをクリアーする context.clearRect( 0, 0, 200, 200 ) ; } ) ; // img要素を作成しておく var imageElement = document.createElement( "img" ) ; imageElement.src = "/character-s.png" ; // ボタンの色 function buttonSelect( element, className ) { for( var a=document.getElementsByClassName( className ),i=a.length; i--; ) { a[i].style.backgroundColor = "#f2f2f2" ; a[i].style.color = "#333" ; } var targetButton = element || a[0] ; targetButton.style.backgroundColor = "#2660A1" ; targetButton.style.color = "#fff" ; }

構文

CanvasRenderingContext2D.fillStyle = color || CanvasGradient || CanvasPattern ;
fillStyle = CanvasRenderingContext2D.fillStyle ;

引数

項目	説明
color	CSSで許可されている方法で色を指定する。`#D36015`、`brown`、`rgb(211,96,21)`、`rgba(211,96,21,0.1)`、`hsl(24,82%,45%)`、`transparent`など。
CanvasGradient	CanvasGradientオブジェクトを指定する。グラデーションで塗りつぶす。
CanvasPattern	CanvasPatternオブジェクトを指定する。画像の繰り返し表示で塗りつぶす。

戻り値

戻り値はありません。

項目	説明
fillStyle	取得の場合は、現在の設定が戻り値となる。

ノート

サポート状況: 主要な全てのブラウザがサポートしている。Ie8以下はcanvas自体に対応していない。
値は3種類: 単純な塗りつぶしなら色を表す文字列、グラデーションで塗りつぶしたい時はCanvasGradientオブジェクト、画像で塗りつぶしたい場合はCanvasPatternオブジェクトを指定する。