javascript - HTML5 Canvas - 逐渐停止

Question

我正在使用 HTML Canvas 进行一些工作。不幸的是我遇到了一个非常奇怪的问题。在代码开发过程中的某个时刻，网页开始挂起浏览器。除了 requestAnimFrame 垫片之外，没有紧密的循环，因此我将其回归到基础知识，并发现了一个非常奇怪的事情。

下面的代码将在屏幕上制作一个圆圈的动画。这工作得很好。如果我注释掉绘制圆圈的代码(在代码中标记)，它就会使浏览器停止运行。发生了什么事？

  window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();

  function animate(lastTime, myCircle) {
  //return;
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // update
    var date = new Date();
    var time = date.getTime();
    var timeDiff = time - lastTime;
    var linearSpeed = 100;
    // pixels / second
    var linearDistEachFrame = linearSpeed * timeDiff / 1000;
    var currentX = myCircle.x;

    if(currentX < canvas.width - myCircle.width - myCircle.borderWidth / 2) {
      var newX = currentX + linearDistEachFrame;
      myCircle.x = newX;
    }
    lastTime = time;

    // clear
    drawGrid();

    //draw a circle
    context.beginPath();
    context.fillStyle = "#8ED6FF";
    context.arc(myCircle.x, myCircle.y, myCircle.width, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
    context.lineWidth = myCircle.borderWidth;
    context.strokeStyle = "black";
    context.stroke();

    // request new frame
    requestAnimFrame(function() {
      animate(lastTime, myCircle);
    });
  }

  $(document).ready(function() {
    var myCircle = {
      x: 50,
      y: 50,
      width: 30,
      height: 50,
      borderWidth: 2
    };

    //drawGrid();

    var date = new Date();
    var time = date.getTime();
    animate(time, myCircle);
  });


function drawGrid(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.lineWidth = 1;

    for (var x = 0; x <= canvas.width; x += 40) {
        context.moveTo(0 + x, 0);
        context.lineTo(0 + x, canvas.height);
    }

    for (var x = 0; x <= canvas.height; x += 40) {
        context.moveTo(0, 0 + x);
        context.lineTo(canvas.width, 0 + x);
    }

    context.strokeStyle = "#ddd";
    context.stroke();
}

我的 Canvas 是这样声明的:

<canvas id="myCanvas" width="700" height="400"></canvas>

Answer 1

事实证明，当我绘制圆圈时它起作用的原因是因为该代码包含一个 closePath 函数。将其添加到下面的 drawGrid 函数中可以解决该问题。

function drawGrid(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.lineWidth = 1;

    context.beginPath();

    for (var x = 0; x <= canvas.width; x += 40) {
        context.moveTo(0 + x, 0);
        context.lineTo(0 + x, canvas.height);
    }

    for (var x = 0; x <= canvas.height; x += 40) {
        context.moveTo(0, 0 + x);
        context.lineTo(canvas.width, 0 + x);
    }

    context.closePath();

    context.strokeStyle = "#ddd";
    context.stroke();
}