Question

我试图随机动画多个东西，但我不能！

我试图把它全部放在这样的一个函数中：

        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var randX = Math.floor(Math.random()*1300);
        var randY = Math.floor(Math.random()*400);
        var randSpX = Math.random()*20;
        var randSpY = Math.random()*20;
        var randNum = Math.floor(Math.random()*3);
        var i = 0;
        var squareX = new Array();
        var squareY = new Array();
        var color = new Array();
        var anim = window.requestAnimationFrame || window.msRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.mozRequestAnimationFrame;

        function square() {
            for (i=0;i<10;i++) {
                randX = Math.floor(Math.random()*1300);
                randY = Math.floor(Math.random()*400);
                randSpX = Math.random()*3;
                randSpY = Math.random()*3;

                squareX[i] = randX;
                squareY[i] = randY;

                context.fillStyle = "#FFF000";
                context.fillRect(squareX[i],squareY[i],20,20);
            }

            randNum = Math.floor(Math.random()*3);

            for (i=0;i<10;1++) {
                spX = Math.random()*3;
                spY = Math.random()*3;

                switch (randNum) {
                    case 0:
                        squareX[i] = squareX[i] + spX;
                        squareY[i] = squareY[i] + spY;
                        break;
                    case 1:
                        squareX[i] = squareX[i] - spX;
                        squareY[i] = squareY[i] - spY;
                        break;
                    case 2:
                        squareX[i] = squareX[i] + spX;
                        squareY[i] = squareY[i] - spY;
                        break;
                    case 3:
                        squareX[i] = squareX[i] - spX;
                        squareY[i] = squareY[i] + spY;
                        break;
                }
            }

            anim(square);
        }

不幸的是，这显示了我的画布，仅此而已。

我试图让square函数成为一个对象并运行动画代码另一个功能，但它不起作用。

感谢。

Answer 1

您没有开始动画循环。

您可以像这样开始动画：

requestAnimationFrame(square);

BTW，你的第二个for循环对你的squareX / squareY没有影响，因为顶部的for循环覆盖了squareX / squareY。

这里的代码经过重构，可以解决这两件事：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
ctx.fillStyle='#fff000';

// create 10 square objects with x,y properties
var squares=[];
for(var i=0;i<10;i++){
  squares.push({x:Math.random()*300,y:Math.random()*300,});
}

// start animating
requestAnimationFrame(animate);

// the animation loop
function animate(){

  // request another animation frame
  requestAnimationFrame(animate);

  ctx.clearRect(0,0,cw,ch);

  for(var i=0;i<squares.length;i++){
    var s=squares[i];

    // update this square's x & y by -3 to 3 pixels
    s.x+= Math.random()*6-3;
    s.y+= Math.random()*6-3;

    // draw the square
    ctx.fillRect(s.x,s.y,20,20);   

  }
}

＆＃13;

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

＆＃13;

<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

如何一次动画多个动画？

1 个答案: