为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我加了旋转五角星就跑到黑布外面去了呢?

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;

}

}


正在回答

3 回答

不好意思,刚刚没有看清楚你注视了代码,重新答一次。drawstar这个函数的功能是根据指定的上下文在特定的位置绘制特定大小的的星星。根据老师前面的例子,我们最好只是规划出一个基本图形的单位路径。具体的位置变换,旋转,缩放都交给外部进行。出错的原因是在外部你进行了旋转,在内部进行了位移,外部的旋转改变了里面的坐标系。将以上的代码改为如下:

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 = 600;
	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.beginPath();
	// cxt.arc(searchlight.x,searchlight.y,searchlight.radius,0,2*Math.PI);
	cxt.translate(searchlight.x,searchlight.y);
	cxt.rotate(rot/180*Math.PI);
	cxt.scale(searchlight.radius,searchlight.radius);
	drawstar(cxt);
	
	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) {
	cxt.beginPath();
	for (var i = 0; i < 5; i++) {
		cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI), -Math.sin((18 + i * 72) / 180 * Math.PI));
		cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5, -Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5);
	}
	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;
	}
}
0 回复 有任何疑惑可以回复我~

试了下你的代码,没有问题啊。可能是高度设置的大了点导致屏幕出现了滚动条,你会发现星星的一部分跑到了黑布的外侧,你可以拖动滚动条看一下其实星星并没有到黑布非外面,你可以试试适当设置小一点的高度,比如600就非常完美了。

0 回复 有任何疑惑可以回复我~

会不会是浏览器兼容问题

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么我加了旋转五角星就跑到黑布外面去了呢?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信