javascript - 网格线切换 HMTL5 Canvas

Question

我想用开关(开/关)制作网格线 x 和 y，但即使在 ctx.clearRect 之后，HTML5 Canvas 也会渲染以前绘制的线，我只想使用相同的按钮打开和关闭线。这是我的 fiddle

http://jsfiddle.net/5uayd/1/

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();
    };

第二次点击时线条不会被删除

Answer 1

将 ctx.beginPath() 放在 ctx.save 之后。

beginPath 告诉浏览器您已完成之前的路径绘制并开始新的绘制。

如果没有beginPath，所有之前的绘图都将被重绘——即使是在clearRect之后