網格線開關HMTL5帆布

Question

我想使用switch（ON / OFF）來制作網格線x和y，但是HTML5畫布甚至在ctx.clearRect之后仍渲染先前繪制的線條，我只想使用相同的按鈕來打開和關閉線條。 這是我的小提琴

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之后，所有先前的圖形也將被重繪