HTML5：如何让我的画布忘记旧像素？答案

【问题标题】：HTML5: How can I make my canvas forget old pixels?HTML5：如何让我的画布忘记旧像素？
【发布时间】：2012-03-14 19:08:36
【问题描述】：

我正在尝试制作一个可以通过鼠标操作（拖动、绘图、单击...）的画布，这似乎是一项简单的任务。目前我让它从按下鼠标的位置到现在的位置画一条线，直到它被释放。但是无论我是否清除画布，都会继续绘制所有旧版本的线。我试过使用 beginPath/closePath 和填充而不是描边；这两种方法都导致这条线永远不会出现。是否有一些......我无法找到的绘制操作的“分隔符”？

源码可以查看和测试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>

【问题讨论】：

标签： html5-canvas

【解决方案1】：

你需要用 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();
    }

否则，您将继续在现有路径中添加行。

【讨论】：

endPath 应该是 closePath，你在 IRC 上说的没错。