請幫忙看一下，執(zhí)行出來為什么純黑？
<!DOCTYPE html style="height:100%;width:100%">
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? *{
? ? ? ? ? ? margin:0px;
? ? ? ? ? ? padding:0px;
? ? ? ? }
? ? </style>
</head>
<body style="height:100%;width:100%">
? ? <canvas id="canvas" style="height:100%;width: 100%">
? ? ? ? 當前瀏覽器不支持Canvas，請更換瀏覽器后再試
? ? </canvas>
? ? <script type="text/javascript">
? ? ? ? var circle= {x:1000,y:100, vx:10,vy:5,}
? ? ? ? window.onload = function(){
? ? ? ? ? ? var canvas = document.getElementById('canvas');
? ? ? ? ? ? ?//獲取瀏覽器顯示屏的寬高
? ? ? ? ? ? WINDOW_WIDTH = document.body.clientWidth;
? ? ? ? ? ? WINDOW_HEIGHT = document.body.clientHeight;
? ? ? ? ? ? RADIUS=150;
? ? ? ? ? ? //畫布大小
? ? ? ? ? ? canvas.width = WINDOW_WIDTH;
? ? ? ? ? ? canvas.height = WINDOW_HEIGHT;
? ? ? ? ? ? var context = canvas.getContext("2d");
? ? ? ? ? ??
? ? ? ? ? ? setInterval(
? ? ? ? ? ? ? ? ?function(){//每幀的時候做什么
? ? ? ? ? ? ? ? ?render(context);//
? ? ? ? ? ? ? ? ?update();
? ? ? ? ? ? },
? ? ? ? ? ? 50//ms,每隔多久執(zhí)行function
? ? ? ? ? ? );
? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ??
? ??
? ? ? ? function render(context){
? ? ? ? ? ? context.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);
? ? ? ? ?
? ? ? ? ? ? context.save();
? ? ? ? ? ? context.beginPath();
? ? ? ? ? ? context.fillStyle="#000";//純黑背景
? ? ? ? ? ? context.fillRect(0,0,canvas.width,canvas.height);
? ? ??
? ? ? ??
? ? ?
? ? ? ? ? ? context.beginPath();
? ? ? ? ? ? context.fillStyle="#fff";
? ? ? ? ? ? context.arc(circle.x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
? ? ? ? ? ? context.fill();
? ? ? ? ? ? context.clip();
? ? ? ? ? ??
? ? ? ? ??
? ? ? ? ? ? context.font="bolder 200px sans-serif";
? ? ? ? ? ? context.fillStyle="red"
? ? ? ? ? ? context.fillText("canvas",canvas.width*0.3,canvas.height*0.5);
? ? ? ? ? ? context.restore();
? ? ? ? }
? ? ? ? function update(){
? ? ? ? ? ? circle.x += circle.vx;//小球x方向位置
? ? ? ? ? ? circle.y += circle.vy;
? ? ? ? ? ? //碰撞檢測
? ? ? ? ? ? if( circle.y <=RADIUS ){//如果小球碰到頂部
? ? ? ? ? ? ? ? circle.y = WINDOW_HEIGHT-RADIUS;
? ? ? ? ? ? ? ? circle.vy = - Math.abs(circle.vy)//y方向速度反向，逐漸減小，
? ? ? ? ? ? }
? ? ? ? ? ? ?if( circle.x >= WINDOW_WIDTH-RADIUS ){//如果小球碰到右
? ? ? ? ? ? ? ? circle.x = WINDOW_HEIGHT-RADIUS;
? ? ? ? ? ? ? ? circle.vx = - Math.abs(circle.vx)//x方向速度反向，逐漸減小，
? ? ? ? ? ? }
? ? ? ? ? ? ?if( circle.y >= WINDOW_HEIGHT-RADIUS ){//如果小球碰到底部
? ? ? ? ? ? ? ? circle.y = WINDOW_HEIGHT-RADIUS;
? ? ? ? ? ? ? ? circle.vy = - Math.abs(circle.vy)//y方向速度反向，逐漸減小，
? ? ? ? ? ? }
? ? ? ? ? ? ?if( circle.x <= RADIUS ){//如果小球碰到左
? ? ? ? ? ? ? ? circle.x = WINDOW_HEIGHT-RADIUS;
? ? ? ? ? ? ? ? circle.vx = - Math.abs(circle.vx)//x方向速度反向，逐漸減小，
? ? ? ? ? ? }
? ? ? ? }
? ?
? ??
? ? </script>
</body>
</html>
2017-01-03
可以了，不用回答