PHP前端开发

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

百变鹏仔 4周前 (09-22) #HTML
文章标签 网格

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

//we are setting the grid width and heightvar grid_w = 200;var grid_h = 200;//we are setting padding around gridvar gridp = 15;//we are defining size of canvas by defining its width and heightvar 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);   }