观赏动态效果请点此下载并用Chrome/Firefox打开index.html
图例：
代码：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>碰撞球 19.3.3 18:11 by:逆火 horn19782016@163.com</title> <style> #canvas{ background:#ffffff; cursor:pointer; margin-left:10px; margin-top:10px; -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5); -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5); box-shadow:3px 3px 6px rgba(0,0,0,0.5); } #controls{ margin-top:10px; margin-left:15px; } </style> </head> <body onload="init()"> <div id="controls"> <input id='animateBtn' type='button' value='运动'/> </div> <canvas id="canvas" width="750px" height="500px" > 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- var paused=true; animateBtn.onclick=function(e){ paused=! paused; if(paused){ animateBtn.value="运动"; }else{ animateBtn.value="暂停"; window.requestAnimationFrame(animate); } } var ctx;// 绘图环境 var balls;// 球数组 function init(){ var canvas=document.getElementById('canvas'); canvas.width=750; canvas.height=500; ctx=canvas.getContext('2d'); balls=[ { x:150, y:250, lastX:150, lastY:250, vx:-7.2, vy:3.8, radius:25, innerColor:'rgba(255,25,0,1)', middleColor:'rgba(255,25,0,0.7)', outerColor:'rgba(255,25,0,0.5)', strokeStyle:'gray', }, { x:650, y:50, lastX:150, lastY:250, vx:-8.2, vy:2.5, radius:25, innerColor:'rgba(113,232,227,1)', middleColor:'rgba(113,232,227,0.7)', outerColor:'rgba(113,232,227,0.5)', strokeStyle:'red', }, { x:50, y:150, lastX:150, lastY:250, vx:12, vy:-14, radius:25, innerColor:'rgba(23,45,227,1)', middleColor:'rgba(23,45,227,0.7)', outerColor:'rgba(23,45,227,0.5)', strokeStyle:'blue', }, ]; }; function update(){ for(var i=0;i<balls.length;i++){ var ball=balls[i]; if(ball.x+ball.vx+ball.radius>ctx.canvas.width || ball.x+ball.vx-ball.radius<0){ ball.vx=-ball.vx; } if(ball.y+ball.vy+ball.radius>ctx.canvas.height || ball.y+ball.vy-ball.radius<0){ ball.vy=-ball.vy; } ball.x+=ball.vx; ball.y+=ball.vy; } } function draw(){ ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); for(var i=0;i<balls.length;i++){ var ball=balls[i]; gradient=ctx.createRadialGradient(ball.x,ball.y,0,ball.x,ball.y,ball.radius); gradient.addColorStop(0.3,ball.innerColor); gradient.addColorStop(0.5,ball.middleColor); gradient.addColorStop(1.0,ball.outerColor); ctx.save(); ctx.beginPath(); ctx.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false); ctx.fillStyle=gradient; ctx.strokeStyle=ball.strokeStyle; ctx.fill(); ctx.stroke(); ctx.restore(); } } function animate(){ if(!paused){ update(); draw(); setTimeout( function(){ window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率 }, 0.10 * 1000 );// 延时执行 } } //--> </script>
2019年3月3日19点52分