Question

我正在使用HTML画布做一些工作。不幸的是，我遇到了一个非常奇怪的问题。在开发代码期间的某个时刻，网页开始挂起浏览器。除了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 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();
}

HTML5画布 - 研磨停止

1 个答案: