概要
状態:-
閲覧数:869
投稿日:2014-03-12
更新日:2017-08-20
現在の枠線スタイル(strokeStyle)で描画
・現在の輪郭描画設定に基づき四角形輪郭を描く
構文
引数
・第1引数x … 矩形の左端座標
・第2引数y … 矩形の上端座標
・第3引数w … 矩形の横幅
・第4引数h … 線幅
1.strokeStyleプロパティで枠線の色を設定
2.strokeRect() メソッドで実際に線描画
・現在の輪郭描画設定に基づき四角形輪郭を描く
構文
CanvasRenderingContext2Dオブジェクト.strokeRect(x, y, w, h)；
引数
・第1引数x … 矩形の左端座標
・第2引数y … 矩形の上端座標
・第3引数w … 矩形の横幅
・第4引数h … 線幅
処理の流れ
1.strokeStyleプロパティで枠線の色を設定
2.strokeRect() メソッドで実際に線描画
遭遇例 ／ 確認例
遭遇例
▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>
<script>var ctx = document.getElementById("canv").getContext('2d');</script>
▼render.js
var COL = 8;
var RECT_CANV = {
x: 0,
y: 0,
w: 500,
h: 500
};
var CELL_SIZE = RECT_CANV.w / COL | 0;
for (var x = 0; x < COL; x++) {
for (var y = 0; y < COL; y++) {
ctx.strokeRect(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.strokeRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
}
}
</script>