我的代码遇到边框为什么不会弹回，直接下落呢

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

我的代码遇到边框为什么不会弹回，直接下落呢

<!DOCTYPE html>

<html>

<head>

var searchlignt={x:400,y:400,radius:100,vx:Math.random()*5+10,vy:Math.random()*5+10};

window.onload=function()

{

var canvas=document.getElementById('canvas');

canvas.width=800;

canvas.height=800;

var context=canvas.getContext("2d");

setInterval(

function(){

drawtext(context);

update(canvas.width,canvas.height);

},40);

}

function drawtext(cxt)

{

var canvas=cxt.canvas;

cxt.clearRect(0,0,canvas.width,canvas.height);//清除圆形

cxt.save();

cxt.beginPath();

cxt.fillStyle="#000";

cxt.fillRect(0,0,canvas.width,canvas.height);//填充矩形

cxt.beginPath(); //绘制探照灯

cxt.fillStyle="#fff";

//填充圆形

cxt.arc(searchlignt.x,searchlignt.y,searchlignt.radius,0,Math.PI*2);

cxt.fill();

cxt.clip();

cxt.font="bold 150px Arial";

cxt.textAlign="center";//水平居中

cxt.textBaseline="middle";//垂直居中

cxt.fillStyle="#058";

cxt.fillText("CANVAS",canvas.width/2,canvas.height/4);

cxt.fillText("CANVAS",canvas.width/2,canvas.height/2);

cxt.fillText("CANVAS",canvas.width/2,canvas.height*3/4);

cxt.restore();

}

function update(canvasWidth,canvasHeight)

{

searchlignt.x+=searchlignt.vx;

searchlignt.y+=searchlignt.vy;

if (searchlignt.x-searchligt.radius<=0) {

searchlignt.vx=-searchlignt.vx;

searchlignt.x=searchlignt.radius;

}

if (searchlignt.x+searchligt.radius>=canvasWidth) {

searchlignt.vx=-searchlignt.vx;

searchlignt.x=canvasWidth-searchlignt.radius;

}

if (searchlignt.y-searchligt.radius<=0) {

searchlignt.vy=-searchlignt.vy;

searchlignt.y=searchlignt.radius;

}

if (searchlignt.y+searchlignt.radius>=canvasHeight) {

searchlignt.y=canvasHeight-searchlignt.radius;

searchlignt.vy=-searchlignt.vy;

}

</script>

</head>

<body>

</body>

</html>

提问者：青墨 2015-03-26 10:55

我的代码遇到边框为什么不会弹回，直接下落呢

个回答