如何使用HTML5和canvas或SVG绘制网格?

在下面给出的示例中,我们首先定义了网格的宽度和高度。然后我们定义画布的大小,并将网格绘制到画布中。

//we are setting the grid width and height

var grid_w = 200;

var grid_h = 200;

//我们在网格周围设置填充

var gridp = 15;

//我们通过定义画布的宽度和高度来定义画布的尺寸

var canvas_w = grid_w + (gridp*2) + 1;

var canvas_h = grid_h + (gridp*2) + 1;

var canvas = $('<canvas/>').attr({width: canvas_w, height: canvas_h}).appendTo('body');

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和canvas或SVG绘制网格? 的全部内容, 来源链接: utcz.com/z/322229.html

回到顶部