                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫基礎(chǔ)

為什么小球只掉落一次就沒有了

<!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;" >
???當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試
??</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>