"지우기?"에 대한 조언 캔버스

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

이렇게하면 똑같이 불투명 한 상자가됩니다.