                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

为什么小球只掉落一次就没有了

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;" >
   当前浏览器不支持Canvas，请更换浏览器后再试
  </canvas>

  <script type="text/javascript">
   var ball={x:512,y:100,r:20,g:2,vx:-4,vy:0,color:"red"}
   window.onload=function(){
    var canvas=document.getElementById("canvas");

    canvas.width=1024;
    canvas.height=768;

    var context=canvas.getContext("2d");

    setInterval(
     function(){
     render(context);
     update()
    },
    50
    )
   }
   function update(){
    ball.x+=ball.vx;
    ball.y+=ball.vy;
    ball.vy+=ball.g;
   }

   function render(cxt){
    cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);

    cxt.fillStyle=ball.color;
    cxt.beginPath();
    cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
    cxt.closePath();

    cxt.fill();
   }
  </script>
</body>
</html>