strokeRect() メソッド

CanvasRenderingContext2D strokeRect() メソッド

概要

 状態:-  閲覧数:671  投稿日:2014-03-12  更新日:2017-08-20  
現在の枠線スタイル(strokeStyle)で描画
・現在の輪郭描画設定に基づき四角形輪郭を描く

構文
CanvasRenderingContext2Dオブジェクト.strokeRect(x, y, w, h);

引数
第1引数x … 矩形の左端座標
第2引数y … 矩形の上端座標
第3引数w … 矩形の横幅
第4引数h … 線幅


処理の流れ


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

遭遇例 / 確認例

 閲覧数:247 投稿日:2015-11-26 更新日: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 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>



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