strokeStyleプロパティ

CanvasRenderingContext2D strokeStyleプロパティ

概要

 状態:-  閲覧数:925  投稿日:2014-06-10  更新日:2017-08-16  
図形の枠線の色を指定

輪郭形状に使われる現在のスタイルを返す
・値をセットして、輪郭スタイルを変更することが可能
・スタイルには、CSSカラーを含んだ文字列か、または、CanvasGradient や CanvasPattern オブジェクトを指定することが可能
・不正な値は無視される

構文
context . strokeStyle [ = value ];


処理の流れ


1.strokeStyleプロパティで枠線の色を設定
2.strokeRect() メソッドで実際に線描画

遭遇例 / 確認例

 閲覧数:277 投稿日:2015-11-21 更新日:2015-12-02 

遭遇例


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



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