내 사용자 캔버스 그리기를 지우는 방법은 무엇입니까?

Question

캔버스 요소를 잘 그릴 수있는 html5 그리기 응용 프로그램이 있습니다. 내 문제는, 나는 지우개의 img가 있고 사용자가 그것을 클릭하고 캔버스를 지울 수있게하고 싶다. 스트로크 색상을 흰색으로 변경하는 방법도 알려 주시면 추가 업보를 알려줍니다. 내가 다시 그리기 기능을 필요가 있다고 생각

var points = new Array(); 
var outlineImage = new Image(); 

function clearCanvas(){ 
context.clearRect(0, 0, canvas.width, canvas.height); 
} 

if (window.addEventListener) { 
    window.addEventListener('load', function() { 
     var canvas, context, tool; 

     function init() { 
      // Find the canvas element. 
      canvas = document.getElementById('imageView'); 
      if (!canvas) { 
       alert('Error: I cannot find the canvas element!'); 
       return; 
      } 

      if (!canvas.getContext) { 
       alert('Error: no canvas.getContext!'); 
       return; 
      } 

      // Size the canvas: 
      canvas.width = 367; 
      canvas.height= 249; 

      // Get the 2D canvas context. 
      context = canvas.getContext('2d'); 
      if (!context) { 
       alert('Error: failed to getContext!'); 
       return; 
      } 

      // Pencil tool instance. 
      tool = new tool_pencil(); 

      // Attach the mousedown, mousemove and mouseup event listeners. 
      canvas.addEventListener('mousedown', ev_canvas, false); 
      canvas.addEventListener('mousemove', ev_canvas, false); 
      canvas.addEventListener('mouseup', ev_canvas, false); 
     } 




     // This painting tool works like a drawing pencil which tracks the mouse 
     // movements. 
     function tool_pencil() { 
      var tool = this; 
      this.started = false; 

      // This is called when you start holding down the mouse button. 
      // This starts the pencil drawing. 
      this.mousedown = function (ev) { 
       context.beginPath(); 
       context.moveTo(ev._x, ev._y); 
       tool.started = true; 
      }; 

      // This function is called every time you move the mouse. Obviously, it only 
      // draws if the tool.started state is set to true (when you are holding down 
      // the mouse button). 
      this.mousemove = function (ev) { 
       if (tool.started) { 
        context.lineTo(ev._x, ev._y); 
        context.stroke(); 
       } 
      }; 

      // This is called when you release the mouse button. 
      this.mouseup = function (ev) { 
       if (tool.started) { 
        tool.mousemove(ev); 
        tool.started = false; 
       } 
      }; 
     } 
     // The general-purpose event handler. This function just determines the mouse 
     // position relative to the canvas element. 
     function ev_canvas(ev) { 
      if (navigator.appName == 'Microsoft Internet Explorer' || navigator.vendor == 'Google Inc.' || navigator.vendor == 'Apple Computer, Inc.') { // IE or Chrome 
       ev._x = ev.offsetX; 
       ev._y = ev.offsetY; 
      } else if (ev.layerX || ev.layerX == 0) { // Firefox 
       ev._x = ev.layerX - this.offsetLeft; 
       ev._y = ev.layerY - this.offsetTop; 
      } else if (ev.offsetX || ev.offsetX == 0) { // Opera 
       ev._x = ev.offsetX; 
       ev._y = ev.offsetY; 
      } 
      // Call the event handler of the tool. 
      var func = tool[ev.type]; 
      if (func) { 
       func(ev); 
      } 
      points.push(ev); 
     } 

     init(); 

    }, false); 
    } 

,하지만 난 정말 난 모르는 :

<div id="draw_area"> 

<canvas id="myCanvas" /> 
<p>browser sucks, here's links blah blah blah</p> 
</canvas> 
</div> 

이는 JS 그것을 보완하는 것입니다 :

이

내 HTML입니다 이 문제와 관련하여 이야기하기. 어떤 통찰력이라도 대단히 감사합니다!

Answer 1

clearRect가 제공하는 배경색이 흰색이라고 가정하면 사용자가 지우개를 선택할 때 획 색상을 흰색으로 변경하면됩니다.

context.strokeStyle = 'white'; 

색상 변경에 대한 자세한 내용은 http://www.w3.org/TR/2dcontext/#fill-and-stroke-styles을 참조하십시오.

지우개 이미지가 캔버스에 그려진 경우 mousedown 또는 mouseup 이벤트 처리기에서 지우개 이미지를 클릭해야합니다. 캔버스 외부에있는 경우 onclick 함수를 추가하여 클릭하면 strokeStyle을 설정하면됩니다. 당신이 모든 것을 지울 지우개를하려는 경우, 다음

function clearCanvas(){ 
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
} 

Answer 2

귀하의 canvas 변수가 clearCanvas가 호출 범위에 사용할 수 없습니다 않습니다. 이 문제를 해결할 수있는 다른 방법이 있지만 간단히 다음을 수행하십시오.

function clearContext(ctx){ 
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
} 

전화를 걸 때 함수에 컨텍스트를 전달하십시오.

그러나 컨텍스트가 어떤 방식 으로든 변환되면 위의 코드는 전체 보이는 영역을 지우지 않습니다. 이에 대해 보호하기 위해, 당신은 할 수 있습니다 :

function clearContext(ctx){ 
    ctx.save(); 
    ctx.setTransform(1,0,0,1,0,0); 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
    ctx.restore(); 
}