html canvas绘制网格,canvas(七)绘制网格和坐标轴

###1.绘制网格

var canvas = document.querySelector("canvas")

var ctx = canvas.getContext("2d")

function DrawDrid(canvas,space){

var canvas = canvas || document.querySelector("canvas")

// 设置间隔

var space = 50

// 定义当前坐标

var x = 0,y = 0

// 设置虚线

ctx.setLineDash([5,10])

//绘制水平方向的网格线

for(y=space;y

//开启路径

ctx.beginPath()

ctx.moveTo(0,y)

ctx.lineTo(canvas.width,y)

ctx.stroke()

}

//绘制垂直方向的网格线

for(x=space;x

//开启路径

ctx.beginPath()

ctx.moveTo(x,0)

ctx.lineTo(x,canvas.height)

ctx.stroke()

}

}

###2.绘制坐标轴