                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

最后一个demo，发现画图一闪而过，然后页面就空白了，什么鬼？代码哪里写错了嘛？求看

<!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>