遭遇例 ／ 確認例

遭遇例

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