概要
状態:-
閲覧数:926
投稿日:2014-03-13
更新日:2017-08-19
塗りつぶした矩形を描画
・canvas 上の指定矩形を、現在の塗りつぶしスタイル(fillStyle)で、塗りつぶす
※色を指定していない状態で、塗りつぶし四角形を描くと、黒色で描画される
・fillRect() メソッド で描かれる矩形はパスではない。そのため、beginPath() メソッドを呼び出す必要はない
・w(幅)かh(高さ)のいずれかが 0 なら、このメソッドは何も作用しない
構文
引数
・第1引数x … 開始位置x座標
・第2引数y … 開始位置y座標
・第3引数w … 幅width
・第4引数h … 高さheight
1.fillStyleプロパティで塗り潰す色を設定
2.fillRect() メソッドで実際に塗り潰す
・canvas 上の指定矩形を、現在の塗りつぶしスタイル(fillStyle)で、塗りつぶす
※色を指定していない状態で、塗りつぶし四角形を描くと、黒色で描画される
・fillRect() メソッド で描かれる矩形はパスではない。そのため、beginPath() メソッドを呼び出す必要はない
・w(幅)かh(高さ)のいずれかが 0 なら、このメソッドは何も作用しない
構文
CanvasRenderingContext2Dオブジェクト.fillRect(x, y, w, h);
引数
・第1引数x … 開始位置x座標
・第2引数y … 開始位置y座標
・第3引数w … 幅width
・第4引数h … 高さheight
処理の流れ
1.fillStyleプロパティで塗り潰す色を設定
2.fillRect() メソッドで実際に塗り潰す
遭遇例 / 確認例
遭遇例
▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>
▼render.js
var COL = 8;
var RECT_CANV = {
x: 0,
y: 0,
w: 500,
h: 500
};
var CELL_SIZE = RECT_CANV.w / COL | 0;
var ctx = document.getElementById("canv").getContext('2d');
for (var x = 0; x < COL; x++) {
for (var y = 0; y < COL; y++) {
ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
}
}
確認例
デフォルト(色指定なし)
・黒色で塗る
▼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 ctx = document.getElementById("canv").getContext('2d');
for (var x = 0; x < COL; x++) {
for (var y = 0; y < COL; y++) {
ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
}
}
</script>