3回答

• 

  _潇潇暮雨

  2016-02-01 11:44:38

  不好意思，刚刚没有看清楚你注视了代码，重新答一次。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 0
• 

  _潇潇暮雨

  2016-02-01 11:09:22

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

  0 0
• 

  Charless

  2016-01-18 16:34:06

  会不会是浏览器兼容问题
  

  0 0