绘制网格6

//version 1.0-0，参数为每个格的像素大小
function drawGrid(context, color, stepx, stepy) {
   context.save() 
   context.strokeStyle = color;
   context.lineWidth = 0.5;//这处只绘制0.5的宽像素是由canvas的特性决定的，如果这个1PX正好位于两个像素的中心点，实际上会绘制2个PX的宽
   
   context.fillStyle = '#ffffff';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);//填充背景色
   
   for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
      context.beginPath();
      context.moveTo(i, 0);
      context.lineTo(i, context.canvas.height);
      context.stroke();
   }

   for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
      context.beginPath();
      context.moveTo(0, i);
      context.lineTo(context.canvas.width, i);
      context.stroke();
   }
   context.restore();
}

//version 1.0-1，参数为格子的个数
function drawGridByStep(color, stepX, stepY){
    context.save();
    context.lineWidth = 0.5;
    context.strokeStyle = color;
    stepX = canvas.width/stepX;
    stepY = canvas.height/stepY;
    for (var i= stepX+ 0.5; i<canvas.width; i+=stepX){
        context.beginPath();
        context.moveTo(i, 0);
        context.lineTo(i+0.5, canvas.height);
        context.stroke();
    }
    for (var i= stepY+ 0.5; i<canvas.height; i+=stepY){
        context.beginPath();
        context.moveTo(0, i);
        context.lineTo(canvas.width, i+0.5);
        context.stroke();
    }
    context.restore();
}