「クリアリング？キャンバス

Question

私はmootoolsクラスを作成し、Mootools Canvas Libraryを使用して、基本的にちょうど他のキャンバスアイテムエリアにクリックイベントがある場合は小さな正方形を作成します。フォトショップのペンツールとノードを想像してみてください。

var Pentool = new Class({ 
    Implements: [Events, Options], 
    initialize: function(canvasel) { 

     CANVAS.init({ 
       canvasElement : canvasel, 
       enableMouse : true 
     }); 

     var _self = this; 

     //add a layer 
     var layer = CANVAS.layers.add(new Layer({ 
       id : 'myLayer' 
     })); 

     var area = new CanvasItem({ 
      id: 'area_', 
      w: 360, 
      h: 500, 
      interactive: true, 

      events: { 
       onDraw: function(ctx) { 
        ctx.fillStyle = 'rgba(255,255,255,0.3)'; 
        ctx.fillRect(0, 0, this.w, this.h); 
        this.setDims(0, 0, this.w, this.h) 
       }, 
       onClick: function(x, y) { 
        _self.addNode(layer, x, y); 
       } 
      } 

     }) 

     layer.add(area); 

     CANVAS.draw(); 


    }, 
    addNode: function(layer, x, y) { 
     var node = new CanvasItem({ 
      id: 'node_', 
      x: x, 
      y: y, 
      fillStyle : 'rgba(255,0,0,1)', 
      events: { 
       onDraw: function(ctx) { 
        ctx.fillStyle = this.fillStyle; 
        ctx.fillRect(this.x, this.y, 12, 12); 
       } 
      } 

     }); 

     layer.add(node);   
     CANVAS.draw(); 

    } 
}) 

これをやめるためにすべてを試しましたが、複数回クリックするたびに不透明度が上がります（不透明度の塗りつぶしを参照）。これをどうやって止めるのですか？キャンバスを正しく「クリア」する必要があると思います。

Answer 1

私はキャンバス自体はかなり新しいですが、ctx.beginPath()があなたに「新しいスタート」をもたらすことがわかりましたが、もう一度moveTo()を実行し、再びすべてのポリゴンとラインを描画する必要があります。

ctx.fillStyle="rgba(255,255,255,0.5)"; 
ctx.fillRect(10,10,50,50); 
ctx.beginPath(); 
ctx.fillRect(70,10,50,50); 

これは、同様に不透明なボックスを作成します。