使用for循環和setInterval動畫畫布

Question

我正在嘗試使用for循環和setInterval為canvas設置動畫，但到目前為止還沒有運氣......這就是我在代碼中的內容：

//loop function
function loop(){
    var dynamic = 0;
    var v = 10;
    var x, y;

    for (dynamic = 0; dynamic < v; dynamic++) {
        x = dynamic * 1;
        y = dynamic * 1;
        c.clearRect(0, 0, 350, 350);
        c.fillStyle = '#87CEEB';
        c.beginPath();
        c.arc(x, y, 10, 0, Math.PI*2, false);
        c.fill();
    }
}

setInterval(loop, 20);

非常感謝提前！

Answer 1

也許你應該將dynamic變量移到外面？ 你似乎在每個loop的同一點繪制圓圈。

var dynamic = 0;
//loop function
function loop(){
  var v = 10;
  var x, y;
  x = dynamic * 1;
  y = dynamic * 1;
  c.clearRect(0,0, 350,350);
  c.fillStyle = '#87CEEB';
  c.beginPath();
  c.arc(x,y, 10, 0, Math.PI*2, false);
  c.fill();

  ++dynamic;
}

setInterval(loop,20);

Answer 2

如前所述：將動態移出動畫循環並在循環內改變動態。

動畫摘要是這樣的：

在for循環之外設置起始變量（如動態）

在動畫循環（）中你想要通過1次移動（不是很多動作）為畫布設置動畫，如下所示：

  + Increment your dynamic variable to induce motion. + Set your x & y to reflect the changes to dynamic. + Clear the canvas to prepare for this animation frame + Draw stuff!

循環之后，使用setInterval（）啟動動畫
如果您的動畫在屏幕上運行，您可以將其關閉！

這里有一些代碼和一個小提琴： http ： //jsfiddle.net/m1erickson/fFfRS/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var c=canvas.getContext("2d");

        // set the dynamic outside the loop
        var dynamic = 10;
        var x;
        var y;

         //loop function
        function loop(){

            // change dynamic
           dynamic=dynamic*1.1;
           x = dynamic;
           y = dynamic*1.2;

            // stop the the animation if it runs out-of-canvas
            if (x>canvas.width || y>canvas.height){
                c.clearRect(0,0,canvas.width,canvas.height);
                clearInterval(myTimer);
                alert("animation done!");
            }

           // clear the canvas for this loop's animation
           c.clearRect(0,0,canvas.width,canvas.height);
           c.fillStyle = '#87CEEB';

           // draw
           c.beginPath();
           c.arc(x,y, 10, 0, Math.PI*2, false);
           c.fill();
        }
        var myTimer=setInterval(loop,20);       

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=400 height=400></canvas>
</body>
</html>

使用for循環和setInterval動畫畫布

問題描述

2 個解決方案

解決方案1
1 2013-02-25 16:09:07

解決方案2
1 已采納 2013-02-25 16:38:35

使用for循環和setInterval動畫畫布

問題描述

2 個解決方案

解決方案1 1 2013-02-25 16:09:07

解決方案2 1 已采納 2013-02-25 16:38:35

解決方案1
1 2013-02-25 16:09:07

解決方案2
1 已采納 2013-02-25 16:38:35