<script type="text/javascript">

? ?

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

window.onload=function(){

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

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

? ? ? ? ? ? canvas.width=800;

? ? ? ? ? ? canvas.height=800;

? ? ? ? ? ? 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);

cxt.save();

? ? ? ? ? ? cxt.beginPath();

cxt.fillStyle="#000";

cxt.fillRect(0,0,canvas.width,canvas.height);

cxt.beginPath();

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

cxt.fillStyle="#FFF";

cxt.fill();

cxt.clip();

cxt.font="bold 150px Arial";

cxt.textAlign="center";

cxt.textBaseLine="middle";

cxt.fillStyle="#ff6600";

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

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

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

cxt.restore();

}

function update(canvasWidth,canvasHeight){

? ?searchLight.x+=searchLight.vx;

? ?searchLight.y+=searchLight.vy;

? if(searchLight.x-searchLight.radius<=0){

? ? ? ? ? ? ? searchLight.vx=-searchLight.vx;

? ? ? ? ? ? ? searchLight.x=searchLight.radius;

? }

? ? if (searchLight.x+searchLight.radius>=canvasWidth) {

? ? ? ? ? ? ? ? ? ?searchLight.vx=-searchLight.vx;

? ? ? ? ? ? ? ? ? ?searchLight.x=canvasWidth-searchLight.radius;

? ? }

? ? if(searchLight.y-searchLight.radius<=0){

? ? searchLight.vy=-searchLight.vy;

? ? searchLight.y=searchLight.radius;

? ? }

? ? if (searchLight.y+searchLight.radius>=canvasHeight) {

? ? ? ? ? ? ? ? ? ?searchLight.vy=-searchLight.vy;

? ? ? ? ? ? ? ? ? ?searchLight.y=canvasHeight-searchLight.radius;

? ? }

}

</script>

我把完整的給你，你自己對(duì)下哪里不同。