fillStyleプロパティ

CanvasRenderingContext2D fillStyleプロパティ

概要

 状態:-  閲覧数:766  投稿日:2014-03-18  更新日:2017-08-18  
色/パターン指定
・図形を塗り潰す色やスタイルを指定するプロパティ
・無効値を指定しても無視されフィールドの値は変更されない
・初期値は "#000000" つまり、黒
※fillStyleで設定したスタイルは、fillRectメソッド、fillメソッド、fillTextメソッドで使用される

構文
CanvasRenderingContext2Dオブジェクト.fillStyle="CSS色指定フォーマット";
CanvasRenderingContext2Dオブジェクト.fillStyle="CanvasGradient オブジェクト";
CanvasRenderingContext2Dオブジェクト.fillStyle="CanvasPattern オブジェクト";

fillStyleプロパティの値
・下記いずれかを指定
1 単色 文字列指定 CSSで定義された色を表す文字列
2 グラデーション CanvasGradient オブジェクト指定 グラデーションのパターンのオブジェクト
3 テクスチャ CanvasPattern オブジェクト指定 Canvasスタイルパターンのオブジェクト


処理の流れ


1.fillStyleプロパティで塗り潰す色を設定
2.fillRect() メソッドで実際に塗り潰す

fillStyleプロパティで指定可能な値の詳細

 閲覧数:272 投稿日:2014-03-18 更新日:2014-03-18 

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要素を使用可能



確認例

 閲覧数:252 投稿日:2015-11-25 更新日:2015-11-25 

確認例


#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>



コメント投稿(ログインが必要)