1

HTMLキャンバスでいくつかの作業を行っています。残念ながら、私は非常に奇妙な問題に遭遇しました。コードの開発中のある時点で、Web ページがブラウザーをハングさせ始めました。シム以外にタイトなループはなかった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>
4

1 に答える 1

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();
}
于 2012-08-07T09:48:51.663 に答える