0

forループとsetIntervalを使用してキャンバスをアニメーション化しようとしていますが、これまでのところ運がありません...コードに含まれているものは次のとおりです。

//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);

よろしくお願いします！

4

2 に答える 2

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);
于 2013-02-25T16:09:07.520 に答える
1

前に述べたように、ダイナミックをアニメーション ループの外に移動し、ループ内でダイナミックを変更します。

アニメーションの要約は次のとおりです。

  1. forループの外側で開始変数（動的など）を設定します

  2. アニメーション loop() 内では、次のようにキャンバスを 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!

  3. ループの後、setInterval() でアニメーションを開始します。

  4. アニメーションが画面からはみ出す場合は、オフにすることもできます。

ここにいくつかのコードとフィドルがあります: 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>
于 2013-02-25T16:38:35.240 に答える