如何清除我的用戶畫布繪圖？

Question

我有這個html5繪圖應用程序，在畫布元素上繪製得很好。我的問題是，我有一個橡皮擦的img，我希望用戶能夠點擊它，它會擦除​​畫布。如果您還可以告訴我如何將筆觸顏色更改爲白色，則還需要額外的因果分。

這是我的html：

<div id="draw_area"> 

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

這是JS來補充它：

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

我想我需要一個重繪功能，但我真的不知道我是什麼談論這個問題。任何有識之士都非常感謝！

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