                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /炫麗的倒計時效果Canvas繪圖與動畫基礎

多個小球跳動的問題。

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
</head>
<body>
<script>
?var?RADIUS=4;
?var?balls=[]
????window.onload=function()
????????{
????????????var?canvas?=?document.getElementById('canvas');
?canvas.width?=?1024;
?canvas.height?=?500;
?var?context?=?canvas.getContext("2d");
?setInterval(
????????????????function?()?{
????????????????????render(context);
?update();
?}
????????????????,
?50
?);
?}


????function?update(){

????????for(?var?i?=?0?;?i?<?balls.length?;?i?++?){

????????????balls[i].x?+=?balls[i].vx;
?balls[i].y?+=?balls[i].vy;
?balls[i].vy?+=?balls[i].g;

?if(?balls[i].y?>=?canvas.width-RADIUS?){
????????????????balls[i].y?=?canvas.height-RADIUS;
?balls[i].vy?=?-?balls[i].vy*0.75;
?}
????????}
????}
????function?render(cxt){
????????cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height)
????????for(?var?i?=?0?;?i?<?balls.length?;?i?++?){
????????????cxt.fillStyle="#ff3";

?cxt.beginPath();
?cxt.arc(?balls[i].x?,?balls[i].y?,?RADIUS?,?0?,?2*Math.PI?,?true?);
?cxt.closePath();

?cxt.fill();
?}
????}
</script>
<canvas?id="canvas"?style="border:1px?solid?#aaa;display:block;margin:50px?auto;">
?<!--當前瀏覽器不支持Canvas，請更換瀏覽器后再試-->
</canvas>

</body>
</html>