                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

最后一個demo，發(fā)現(xiàn)畫圖一閃而過，然后頁面就空白了，什么鬼？代碼哪里寫錯了嘛？求看

<!DOCTYPE?html>
<html>
<head>
????<title>躁動的小球</title>
????<meta?charset="utf-8">
</head>
<body>
????<canvas?id="canvas"?style="display:?block;margin:50px?auto">
????????<p>you?browser?not?support?canvas!</p>
????</canvas>
????<script?type="text/javascript">
????????var?WIDTH?=?900;
????????var?HEIGHT?=?500;
????????var?balls?=?[];
????????window.onload?=?function(){
????????????var?canvas?=?document.getElementById('canvas'),
????????????????context?=?canvas.getContext('2d');
????????????canvas.width?=?WIDTH;
????????????canvas.height?=?HEIGHT;
????????????for(var?i=0;i<20;i++){
????????????????var?radius?=?Math.random()*25+25;
????????????????aBall?=?{
????????????????????color:"rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")",
????????????????????radius:radius,
????????????????????x:Math.random()*(canvas.width-2*radius)+radius,
????????????????????y:Math.random()*(canvas.height-2*radius)+radius,
????????????????????vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)),
????????????????????vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100))
????????????????}
????????????????balls[i]?=?aBall;
????????????}

????????????setInterval(function(){
????????????????draw(context);
????????????????update(canvas.width,canvas.height);
????????????},50);
????????}

????????function?draw(cxt){
????????????var?canvas?=?cxt.canvas;
????????????cxt.clearRect(0,0,canvas.width,canvas.height);
????????????for(var?i=0;i<balls.length;i++){
????????????????cxt.fillStyle?=?balls[i].color;
????????????????cxt.beginPath();
????????????????cxt.arc(balls[i].x,balls[i].y,balls[i].radius,0,Math.PI*2);
????????????????cxt.closePath();
????????????????cxt.fill();
????????????}
????????}
????????function?update(canvasWidth,canvasHeight){
????????????for?(var?i?=?0;?i?<?balls.length;?i++)?{
????????????????balls[i].x?+=?balls[i].vx;
????????????????balls[i].y?+=?balls[i].vy;

????????????????if(balls[i].x?-?balls[i].radius?<=?0){
????????????????????balls[i].vx?=?-balls[i].vx;
????????????????????balls[i].x?=?balls[i].radius;
????????????????}
????????????????if(balls[i].x?+?balls[i].radius?>=?canvasWidth){
????????????????????balls[i].vx?=?-balls[i].vx;
????????????????????balls[i].x?=?canvasWidth?-?balls[i].radius;
????????????????}

????????????????if(balls[i].y?-?balls[i].radius?<=?0){
????????????????????balls[i].vy?=?-balls[i].vy;
????????????????????balls[i].y?=?balls[i].radius;
????????????????}
????????????????if(balls[i].y?+?balls[i].radius?>=?canvasHeight){
????????????????????balls[i].vy?=?-balls[i].vy;
????????????????????balls[i].y?=?canvasHeight?-?balls[i].radius;
????????????????}
????????????}
????????}
????</script>
</body>
</html>