Javascript HTML5画布-嘎然而止

我正在做一些HTML画布的工作。不幸的是，我遇到了一个非常奇怪的问题。在代码开发过程中的某个时刻，网页开始挂起浏览器。除了

requestAnimFrame

shim之外，没有紧密的循环，所以我把它带回了基础，发现了一件非常奇怪的事情

下面的代码将在屏幕上设置一个圆圈的动画。这个很好用。如果我注释掉代码以绘制圆圈（在代码中标记），它会使浏览器停止运行。发生了什么事

  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();
}

window.requestAnimFrame=（函数（回调）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
函数动画（上次，myCircle）{
//返回；
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
//更新
变量日期=新日期（）；
var time=date.getTime（）；
var timeDiff=时间-上次时间；
变量线性速度=100；
//像素/秒
var LINEARDISEACHFRAME=线性速度*时间差/1000；
var currentX=myCircle.x；
如果（当前X对于（var x=0；x结果表明，当我绘制圆时，它起作用的原因是因为该代码包含一个
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();
}

函数drawGrid（）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
clearRect（0，0，canvas.width，canvas.height）；
context.lineWidth=1；
context.beginPath（）；
对于（var x=0；x结果表明，当我绘制圆时，它起作用的原因是因为该代码包含一个
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();
}

函数drawGrid（）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
clearRect（0，0，canvas.width，canvas.height）；
context.lineWidth=1；
context.beginPath（）；
对于（var x=0；x哇，你没有错，它会导致浏览器崩溃！我知道..疯狂，哈；有趣的是，我发现的大量示例实际上没有显示
closePath的用法
哇，你没有错，它会导致浏览器崩溃！我知道..疯狂，哈；有趣的是，我发现的大量示例实际上没有显示它的用法关闭路径的