Javascript 网格线开关HMTL5画布

我想用开关（开/关）绘制网格线x和y，但是HTML5画布正在渲染之前绘制的线，即使在ctx.clearRect之后，我只想用相同的按钮打开和关闭这些线。这是我的小提琴

var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'）；
var gridline_x=false，gridline_y=false；
var grid_x=函数（）{
网格线_x=（网格线_x）？false：true；
网格线（）；
};
var grid_y=函数（）{
gridline_y=（gridline_y）？false：true；
网格线（）；
};
var GridLines=函数（）{
var ctx=canvas.getContext（'2d'）；
clearRect（0,0，canvas.width，canvas.height）；
log（'Grid X:'+gridline_X+'Grid Y:'+gridline_Y））；
ctx.save（）；
如果（网格线_y）
对于（变量i=1；i

在您的

ctx.save

之后，第二次单击时不会删除这些行

beginPath

告诉浏览器您已经完成了以前的路径图形，并且正在开始新的图形

如果没有

beginPath

，所有以前的图形都将被重新绘制——即使在

clearRect

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

  var gridline_x = false,gridline_y = false;

  var grid_x = function(){
      gridline_x = (gridline_x)?false:true;
      GridLines();
  };

  var grid_y = function(){
      gridline_y = (gridline_y)?false:true;
      GridLines();
  };


  var GridLines = function(){

        var ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,canvas.width,canvas.height);


        console.log('Grid  X: '+gridline_x + ' Grid Y: '+gridline_y);
        ctx.save(); 

        if(gridline_y)
        for(var i = 1; i < canvas.width; i += 50) {

            ctx.moveTo( i, 0 );
            ctx.lineTo( i, canvas.height);

        }


        if(gridline_x)
        for(var i = 1; i < canvas.height ; i += 50) {

            ctx.moveTo( 0, i );
            ctx.lineTo( canvas.width, i);
        }

        ctx.strokeStyle = 'hsla(0, 0%, 40%, .5)';
        ctx.stroke();
        ctx.restore();



        //ctx.restore();
    };