HTML5：我怎样才能让我的画布忘记旧像素？

我试图制作一个可以通过鼠标操作的画布（拖动，绘图，点击...），这看起来是一个简单的任务。目前，我已经画出了从鼠标按下的位置到现在的位置，直到它被释放。但是无论我是否清除画布，该行的所有旧版本都会继续绘制。我试过使用beginPath/closePath和fill来代替笔画;两种方法都导致线条永不出现。是否有一些我无法找到的绘制操作的“分隔符”？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 2012-03-14 10:14:01

HTML5：我怎样才能让我的画布忘记旧像素？

回答

相关问题