jCanvas的clearCanvas似乎并没有使用层工作

Question

我已经组织了我jCanvas代码到一个渲染方法，对火灾window.resize：

<script type="text/javascript"> 
    var middleX; 
    var middleY; 
    var canvas; 
    var ctx; 

    var isLoaded = false; 

    $(document).ready 
    (
     function() 
     { 
      init(); 
      isLoaded = true; 

      render(); 

      $("canvas").fadeIn(2000); 
     } 
    ); 

    function scaleToWindowDimensions() 
    { 
     ctx.canvas.width = window.innerWidth; 
     ctx.canvas.height = window.innerHeight; 

     middleX = $canvas.width()/2; 
     middleY = $canvas.height()/2; 
    } 

    function init() 
    { 
     $canvas = $('canvas'); 
     ctx = document.getElementById("canvas").getContext("2d"); 

     scaleToWindowDimensions(); 
    } 

    $(window).resize 
    (
     function() 
     { 
      scaleToWindowDimensions(); 

      render(); 
     } 
    ); 

    function render() 
    { 
     if (!isLoaded) 
     { 
      return; 
     } 

     $canvas.clearCanvas(); 

     // ctx.clearRect(0, 0, $canvas.width(), $canvas.height()); 

     $canvas.addLayer({ 
      method: 'drawArc', 
      strokeStyle: "#000", 
      strokeWidth: 1, 
      fillStyle: '#c33', 
      x: middleX, 
      y: middleY, 
      closed: true, 
      radius: 50, 
      // Event bindings 
      mousedown: function (target) 
      { 
       alert('You pushed RED!'); 
      }, 
      mouseup: function (target) 
      { 
       target.fillStyle = '#c33'; 
      }, 
      mouseover: function (target) 
      { 
       target.fillStyle = "#888"; 
      }, 
      mouseout: function (target) 
      { 
       target.fillStyle = "#c33"; 
      } 
     }); 

     $canvas.addLayer({ 
      method: "drawText", 
      strokeStyle: "#000", 
      fromCenter: true, 
      strokeWidth: 1, 
      fillStyle: "#333", 
      fontSize: "18pt", 
      fontFamily: "Verdana", 
      x: middleX, 
      y: middleY, 
      text: "Man", 
      data: { "id": 1, "word": "Man" }, 
      mousedown: function (target) 
      { 
       alert($(this).id); 
      } 
     }); 

     $canvas.addLayer({ 
      method: 'drawArc', 
      strokeStyle: "#000", 
      strokeWidth: 1, 
      fillStyle: '#d88', 
      x: 500, 
      y: 100, 
      closed: true, 
      radius: 40, 
      // Event bindings 
      mousedown: function (target) 
      { 
       alert('You pushed RED!'); 
       target.fillStyle = '#333'; 
      }, 
      mouseup: function (target) 
      { 
       target.fillStyle = '#d88'; 
      }, 
      mouseover: function (target) 
      { 
       target.fillStyle = "#888"; 
      }, 
      mouseout: function (target) 
      { 
       target.fillStyle = "#d88"; 
      } 
     }); 

     $canvas.addLayer({ 
      method: "drawText", 
      strokeStyle: "#000", 
      fromCenter: true, 
      strokeWidth: 1, 
      fillStyle: "#333", 
      fontSize: "16pt", 
      fontFamily: "Verdana", 
      x: 500, 
      y: 100, 
      text: "Men", 
      data: { "id": 2, "word": "Men" }, 
      mousedown: function (target) 
      { 
       alert($(this).id); 
      } 
     }); 

     $canvas.addLayer({ 
      method: 'drawLine', 
      strokeStyle: "#222", 
      strokeWidth: 1, 
      x1: middleX, 
      y1: middleY, 
      x2: 500, 
      y2: 100, 
      radius: 40, 
     }); 

     $canvas.drawLayers(); 
    } 
</script> 

这绘本图片：

意图是当第一步调用渲染来清除整个画布时：

$canvas.clearCanvas(); 

// ctx.clearRect(0, 0, $canvas.width(), $canvas.height()); 

这是两次单独的清除画布的尝试，但都不起作用。没有画布被清除，结果是这样的：

我有这个事做与层而不是直接绘制，但我很困惑，为什么在画布上是不是作为一个总体思路清除...

TIA。

Answer 1

clearCanvas正如预期的那样工作，这里的问题是，您在render的每个调用中都添加了五个图层到$canvas。所以，当调用drawLayers时，绘制所有添加到$canvas的图层;五个更新的以及在之前的render调用中添加的所有那些层。要解决这个问题

一种方法是只改变在render方法层与setLayer，并在被称为只有一次，可能init方法添加它们。

所以，init变为：

function init() { 
    $canvas = $('canvas'); 
    ctx = document.getElementById("canvas").getContext("2d"); 

    scaleToWindowDimensions(); 

    console.log($canvas); 

    //Adding layers in init 
    //and defining all the 
    //static properties which 
    //won't change on each render 
    $canvas.addLayer({ 
     name: "l0",     //Unique name for access 
     visible: true, 
     method: 'drawArc', 
     strokeStyle: "#000", 
     strokeWidth: 1, 
     fillStyle: '#c33', 
     x: middleX, 
     y: middleY, 
     closed: true, 
     radius: 50, 
     // Event bindings 
     mousedown: function (target) { 
      alert('You pushed RED!'); 
     }, 
     mouseup: function (target) { 
      target.fillStyle = '#c33'; 
     }, 
     mouseover: function (target) { 
      target.fillStyle = "#888"; 
     }, 
     mouseout: function (target) { 
      target.fillStyle = "#c33"; 
     } 
    }) 
     .addLayer({ 
     name: "l1",     //Unique name for access    
     visible: true, 
     method: "drawText", 
     strokeStyle: "#000", 
     fromCenter: true, 
     strokeWidth: 1, 
     fillStyle: "#333", 
     fontSize: "18pt", 
     fontFamily: "Verdana", 
     x: middleX, 
     y: middleY, 
     text: "Man", 
     data: { 
      "id": 1, 
      "word": "Man" 
     }, 
     mousedown: function (target) { 
      alert($(this).id); 
     } 
    }) 
     .addLayer({ 
     name: "l2",     //Unique name for access 
     visible: true, 
     method: 'drawArc', 
     strokeStyle: "#000", 
     strokeWidth: 1, 
     fillStyle: '#d88', 
     x: 500, 
     y: 100, 
     closed: true, 
     radius: 40, 
     // Event bindings 
     mousedown: function (target) { 
      alert('You pushed RED!'); 
      target.fillStyle = '#333'; 
     }, 
     mouseup: function (target) { 
      target.fillStyle = '#d88'; 
     }, 
     mouseover: function (target) { 
      target.fillStyle = "#888"; 
     }, 
     mouseout: function (target) { 
      target.fillStyle = "#d88"; 
     } 
    }) 
     .addLayer({ 
     name: "l3",     //Unique name for access 
     visible: true, 
     method: "drawText", 
     strokeStyle: "#000", 
     fromCenter: true, 
     strokeWidth: 1, 
     fillStyle: "#333", 
     fontSize: "16pt", 
     fontFamily: "Verdana", 
     x: 500, 
     y: 100, 
     text: "Men", 
     data: { 
      "id": 2, 
      "word": "Men" 
     }, 
     mousedown: function (target) { 
      alert($(this).id); 
     } 
    }) 
     .addLayer({ 
     name: "l4",     //Unique name for access 
     visible: true, 
     method: 'drawLine', 
     strokeStyle: "#222", 
     strokeWidth: 1, 
     x1: middleX, 
     y1: middleY, 
     x2: 500, 
     y2: 100, 
     radius: 40, 
    }); 
} 

而且render变为：

function render() { 
    if (!isLoaded) { 
     return; 
    } 

    $canvas.clearCanvas(); 

    // ctx.clearRect(0, 0, $canvas.width(), $canvas.height()); 

    //Here, use setLayer to change 
    //properties which are supposed to change 
    //with render 

    //We use the unique name of each layer 
    //set in init to access them. 
    $canvas.setLayer("l0", { 
     x: middleX, 
     y: middleY, 
    }); 

    $canvas.setLayer("l1", { 
     x: middleX, 
     y: middleY 
    }); 

    //Layer l2 and l3 don't 
    //change anything, so they are 
    //not changed with render. 

    $canvas.setLayer("l4", { 
     x1: middleX, 
     y1: middleY 
    }); 

    $canvas.drawLayers(); 
} 

Working Example。