fillStyleプロパティ

1.単色

CSSで定義された色を文字列で指定
・rgba形式でアルファ値を含む文字列を指定することで半透明を表現することも可能

有効な値の例
・red
・rgb(0,0,255)
・rgba(0,0,255,0.5)
・#00ff00
・これらの値は文字列として引用符をつけて fillStyle = 'rgb(0,0,255)' のように記述する
・値の設定を行った形式に関わらず、値を取得する際の形式は常に#xxxxxxへ変換されたものとなる

---

2.グラデーション

CanvasGradientオブジェクトを指定
・線形グラデーションと放射状のグラデーションの両方を実現可能

---

3.テクスチャ

CanvasPatternオブジェクトを指定
・テクスチャにはimg要素またはcanvas要素またはvideo要素を使用可能

確認例

#0000CDで塗る
▼index.html

<canvas id="canv" width="500px" height="500px"></canvas>



<script>

var COL = 8;

var RECT_CANV = {

   x: 0,

   y: 0,

   w: 500,

   h: 500

};

var CELL_SIZE = RECT_CANV.w / COL | 0;

var COLOR_SELECT = "#0000CD";



var ctx = document.getElementById("canv").getContext('2d');



for (var x = 0; x < COL; x++) {

    for (var y = 0; y < COL; y++) {

        ctx.fillStyle = COLOR_SELECT;

        ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);

    }

}

</script>