Как очистить чертеж моего пользователя?

Question

У меня есть это приложение для рисования html5, которое отлично рисует элемент canvas. Моя проблема в том, что у меня есть 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 для получения дополнительной информации об изменении цвета.

Если ваше латинское изображение нарисовано на холсте, вам необходимо будет обнаружить его щелчок в обработчиках событийили 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(); 
}