概要
状態:-
閲覧数:1,120
投稿日:2014-06-10
更新日:2017-08-16
図形の枠線の色を指定
輪郭形状に使われる現在のスタイルを返す
・値をセットして、輪郭スタイルを変更することが可能
・スタイルには、CSSカラーを含んだ文字列か、または、CanvasGradient や CanvasPattern オブジェクトを指定することが可能
・不正な値は無視される
構文
1.strokeStyleプロパティで枠線の色を設定
2.strokeRect() メソッドで実際に線描画
輪郭形状に使われる現在のスタイルを返す
・値をセットして、輪郭スタイルを変更することが可能
・スタイルには、CSSカラーを含んだ文字列か、または、CanvasGradient や CanvasPattern オブジェクトを指定することが可能
・不正な値は無視される
構文
context . strokeStyle [ = value ];
処理の流れ
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 COLOR_LINE = "#FFFFFF";
ctx.strokeStyle = COLOR_LINE;
確認例
#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_LINE = "#0000CD";
var ctx = document.getElementById("canv").getContext('2d');
for (var x = 0; x < COL; x++) {
for (var y = 0; y < COL; y++) {
ctx.strokeStyle = COLOR_LINE;
ctx.strokeRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
}
}
</script>