我试图随机动画多个东西,但我不能!
我试图把它全部放在这样的一个函数中:
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函数成为一个对象并运行动画代码 另一个功能,但它不起作用。
感谢。
答案 0 :(得分:1)
您没有开始动画循环。
您可以像这样开始动画:
requestAnimationFrame(square);
BTW,你的第二个for循环对你的squareX / squareY没有影响,因为顶部的for循环覆盖了squareX / squareY。
这里的代码经过重构,可以解决这两件事:
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;