为什么我加了旋转五角星就跑到黑布外面去了呢?
var searchlight={x:400,y:400,radius:150,vx:Math.random()*5+10,vy:Math.random()*5+10};
var rot=0;
window.onload=function()
{
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
if(canvas.getContext('2d'))
{
var context=canvas.getContext('2d');
}
else
{
alert('该浏览器不支持!');
}
setInterval(function(){
draw(context);
update(canvas.width,canvas.height);
},40);
};
function draw(cxt)
{
var canvas=cxt.canvas;
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.save();
cxt.beginPath();
cxt.fillStyle='black';
cxt.fillRect(0,0,canvas.width,canvas.height);
cxt.save();
//cxt.arc(searchlight.x,searchlight.y,searchlight.radius,0,2*Math.PI);
//cxt.rotate(rot/180*Math.PI);
drawstar(cxt,searchlight.x,searchlight.y,searchlight.radius);
cxt.fillStyle='#fff';
cxt.fill();
cxt.restore();
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/4*3);
cxt.restore();
}
//星星
function drawstar(cxt,x,y,r)
{
cxt.beginPath();
for(var i=0;i<5;i++)
{
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*r+x,-Math.sin((18+i*72)/180*Math.PI)*r+y);
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*r*0.5+x,-Math.sin((54+i*72)/180*Math.PI)*r*0.5+y);
}
cxt.closePath();
}
//碰撞检测
function update(width,height)
{
rot += 1;
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>=width)
{
searchlight.vx=-searchlight.vx;
searchlight.x=width-searchlight.radius;
}
if(searchlight.y-searchlight.radius<=0)
{
searchlight.vy=-searchlight.vy;
searchlight.y=searchlight.radius;
}
if(searchlight.y+searchlight.radius>=height)
{
searchlight.vy=-searchlight.vy;
searchlight.y=height-searchlight.radius;
}
}