                        课程
                    
                        /前端开发
                        
                            /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>