请帮忙看一下，执行出来为什么纯黑？

源自：8-3 clip和剪辑区域

请帮忙看一下，执行出来为什么纯黑？

<!DOCTYPE html style="height:100%;width:100%">

<html>

<head>

margin:0px;

padding:0px;

}

</style>

</head>

当前浏览器不支持Canvas，请更换浏览器后再试

</canvas>

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,每隔多久执行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>

提问者：je_suis_idiot 2017-01-03 16:51

请帮忙看一下，执行出来为什么纯黑？

个回答