HTML5 とキャンバスまたは SVG を使用してグリッドを描画するにはどうすればよいですか?

以下の例では、最初にグリッドの幅と高さを定義します。次に、キャンバスのサイズを定義し、キャンバス上にグリッドを描画します。

//we are setting the grid width and height
var grid_w = 200;
var grid_h = 200;

//we are setting padding around grid
var gridp = 15;

//we are defining size of canvas by defining its width and height
var canvas_w = grid_w + (gridp*2) + 1;
var canvas_h = grid_h + (gridp*2) + 1;
var canvas = $(&#39;<canvas/>&#39;).attr({width: canvas_w, height: canvas_h}).appendTo(&#39;body&#39;);
var ctx = canvas.get(0).getContext("2d");

これが私たちのアプローチです -

function drawBoard(){
   for (var a = 0; a <= grid_w; a += 50) {
      ctx.moveTo(0.5 + a + gridp, gridp);
      ctx.lineTo(0.5 + a+ gridp, grid_h + gridp);
   }

以上がHTML5 とキャンバスまたは SVG を使用してグリッドを描画するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。