HTML5: Как я могу заставить свой холст забыть старые пиксели?

Я пытаюсь сделать холст, который можно управлять с помощью мыши (перетаскивание, рисование, щелчок ...), что, казалось бы, было бы простой задачей. В настоящее время я рисую линию, с которой мышь была нажата, где бы она ни была, пока она не будет выпущена. Но все старые версии строки продолжают рисоваться независимо от того, очищаю ли я холст. Я попытался использовать beginPath/closePath и заполнить вместо штриха; оба подхода заставили линию никогда не появляться. Есть ли какой-то ... «разделитель» операций с ничьей, который я не смог найти?HTML5: Как я могу заставить свой холст забыть старые пиксели?

Источник может быть просмотрен и протестирован here, и я также включил его ниже.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Canvas</title> 
    </head> 
    <body> 
    <canvas id="test" width="640" height="480"></canvas> 
    <script type="text/javascript"> 
     (function(){ 
     // http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ 
     function getMousePos(obj, evt){ 
      // get canvas position 
      var top = 0; 
      var left = 0; 
      while (obj && obj.tagName != 'BODY') { 
      top += obj.offsetTop; 
      left += obj.offsetLeft; 
      obj = obj.offsetParent; 
      } 

      // return relative mouse position 
      var mouseX = evt.clientX - left + window.pageXOffset; 
      var mouseY = evt.clientY - top + window.pageYOffset; 
      return { 
      x: mouseX, 
      y: mouseY 
      }; 
     } 
     var canvasElement = document.getElementById('test'); 

     if(canvasElement.getContext){ 
      var canvas = canvasElement.getContext('2d'); 
      var start = null; 
      var end = null; 
      var drawing = false; 

      canvasElement.addEventListener('mousedown', function (event){ 
      var mousePos = getMousePos(canvasElement, event); 
      start = mousePos; 
      end = mousePos; 

      drawing = true; 
      }, false); 
      canvasElement.addEventListener('mousemove', function (event){ 
      if(drawing){ 
       end = getMousePos(canvasElement, event); 
      } 
      }, false); 
      function release(event){ 
      drawing = false; 
      } 
      canvasElement.addEventListener('mouseup', release, true); 

      var FPS = 30; 
      setInterval(function() { 
      canvas.clearRect(0, 0, canvasElement.width, canvasElement.height); 
      if(drawing && start != null){ 
       canvas.moveTo(start.x, start.y); 
       canvas.lineTo(end.x, end.y); 
       canvas.stroke(); 
      } 
      }, 1000/FPS); 
     } 
     })(); 
    </script> 
    </body> 
</html>

источник

2012-03-14 Grault

Вы должны создать путь с beginPath и closePath, например, так:

canvas.clearRect(0, 0, canvasElement.width, canvasElement.height); 
    if(drawing && start != null){ 
     canvas.beginPath(); 
     canvas.moveTo(start.x, start.y); 
     canvas.lineTo(end.x, end.y); 
     canvas.closePath(); 
     canvas.stroke(); 
    }

В противном случае вы будете просто продолжать добавлять строки в существующий путь.

источник

2012-03-14 10:08:11 buck

endPath должен быть closePath, который вы правильно сказали на IRC. – Grault

HTML5: Как я могу заставить свой холст забыть старые пиксели?

ответ

Смежные вопросы