https://github.com/kotone/ball.git 这是代码地址http://htmlpreview.github.io/?https://github.com/kotone/bugRepository/blob/master/c-1.html 这是页面，50个小球的运动，简直就是混乱不堪。还请dalao帮忙看下问题在哪。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title></head><body><canvas id="canvas" style="border:1px solid #000; display: block;margin:50px auto"></canvas><script type="text/javascript">var ctx;var canvas;const colors=["#F70A30","#F3118C","#AF14EF","#1915EA","#0FE7D3","#2BDE3D","#DEDC24","#E4991B"];var ball=[];window.onload=function(){canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); canvas.width=600;canvas.height=600;for (var i = 0; i <50; i++) {var aBall={r:Math.random()*20+10,x:Math.random()*canvas.width,y:Math.random()*canvas.height,g:Math.random()*1.5,vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,vy:-5,color:colors[Math.floor(Math.random()*colors.length)]};ball.push(aBall);drawLoop();};}function drawLoop(){ window.requestAnimFrame(drawLoop);drawBall();animetBall();}function drawBall(){ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);for (var i = 0; i < ball.length; i++) {ctx.fillStyle=ball[i].color;ctx.beginPath();ctx.arc(ball[i].x,ball[i].y,ball[i].r,0,2*Math.PI);ctx.closePath();ctx.fill();}}function animetBall(){for (var i = 0; i < ball.length; i++) {ball[i].x+=ball[i].vx;ball[i].y+=ball[i].vy;//ball[i].vy=ball[i].g;//下if(ball[i].y>=canvas.height-ball[i].r){ball[i].y=canvas.height-ball[i].r;ball[i].vy= -ball[i].vy;}//上if(ball[i].y<=ball[i].r){ball[i].y=ball[i].r;ball[i].vy= -ball[i].vy;}//左if(ball[i].x>=canvas.width-ball[i].r){ball[i].x=canvas.width-ball[i].r;ball[i].vx= -ball[i].vx;}//右if(ball[i].x<=ball[i].r){ball[i].x=ball[i].r;ball[i].vx= -ball[i].vx;}}}window.requestAnimFrame = (function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {return window.setTimeout(callback, 1000 / 60);};})();</script></body></html>
添加回答
举报
0/150
提交
取消