canvas流星月亮星星银河

这是页面的特效，首先月亮直接出现，然后星星和银河渐渐的出现（一闪一闪），最后流星划过，留下完美的句点。

所有的动画都是通过帧来实现的。

星星的代码分为2部分，首先是随机生成星星，然后是绘制星星，最后是星星的帧动画。

随机生成星星代码：

	function newStar(num,width,height) {

		var stars = [];
		/// 恒星
		for(var i = 0; i < num; i++) {
			var x = Math.round(Math.random() * width);
			var y = Math.round(Math.random() * height);

			//避开月亮
			if(y > 100 && y <400) {
				if(x > width - 300 && x < width -250) {
				x = x - 100;
				} else if(x > width - 250 && x < width -200) {
					x = x + 100;
				}
			}

			var star = {
				x: x,
				y: y,
				r:Math.round(Math.random()*4),
				alpha:0,//Math.random(),
				valpha:(Math.random()/70)*(Math.random() > .5 ? -1 : 1),//随机+- 星星透明度改变加速度
			}

			stars.push(star);
		}

		return stars;

	}

然后是如何绘制星星：

	function drawStar(cxt, x, y, r, alpha) {
		cxt.beginPath();
		var draw = cxt.createRadialGradient(x, y, 0, x, y, r);
		// x0	渐变的开始圆的 x 坐标
		// y0	渐变的开始圆的 y 坐标
		// r0	开始圆的半径
		// x1	渐变的结束圆的 x 坐标
		// y1	渐变的结束圆的 y 坐标
		// r1	结束圆的半径
		draw.addColorStop(0,'rgba(255,255,255,'+ alpha +')');
		draw.addColorStop(1,'rgba(255,255,255,0)');
		cxt.fillStyle  = draw;
		cxt.arc(x, y,  r, 0, Math.PI*2, true);

		// x	圆的中心的 x 坐标。
		// y	圆的中心的 y 坐标。
		// r	圆的半径。
		// sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
		// eAngle	结束角，以弧度计。
		// counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
		cxt.fill();
		cxt.closePath();			

	}

最后是动画（这部分比较简单）

                cxt.clearRect(0,0,w,h);//清空画布

		////绘制星星
		// console.log(self.stars)
		for(var i = 0; i < num; i++) {
			drawStar(cxt, stars[i].x, stars[i].y, stars[i].r, stars[i].alpha);

			///改变星星亮度
			if(stars[i].alpha < 0 || stars[i].alpha > 1) {
				stars[i].valpha = stars[i].valpha * -1;
			}

			stars[i].alpha += stars[i].valpha;

		}                

接下来说的是月亮，月亮比较简单，就是画一个圆形，一个渐变的背景。

function drawMoon(cxt, w, h) {
	var moon = cxt.createRadialGradient(w - 300, 200, 17.5, w - 300, 200, 150);

　　　　//径向渐变
        moon.addColorStop(0, 'rgba(255,255,255,.9)');
        moon.addColorStop(0.01, 'rgba(70,70,80,.9)');
        moon.addColorStop(0.2, 'rgba(40,40,50,.95)');
        moon.addColorStop(0.4, 'rgba(20,20,30,.8)');
        moon.addColorStop(1, 'rgba(0,0,10,0)');

        cxt.beginPath();
        cxt.save()
        cxt.fillStyle = moon;
        cxt.fillRect(0, 0, w, h);
        cxt.restore();
        cxt.fill();
        cxt.closePath();
}

让然后是流星

流星的生成比较简单就是比星星多了一个随机的速度。

流星的绘画就是一个半圆+渐变的超长三角形

function drawlineStar(cxt, x, y, r, len) {

		///半圆
		cxt.beginPath();
		var draw = cxt.createRadialGradient(x, y, 0, x, y, r); 
		draw.addColorStop(0,'rgba(255,255,255,1)');
		draw.addColorStop(1,'rgba(255,255,255,0)');
		cxt.fillStyle  = draw;
		cxt.arc(x, y, 1, Math.PI / 4, 5 * Math.PI / 4);
		cxt.fill();
		cxt.closePath();	

		///三角形
		cxt.beginPath();
		var tra = cxt.createLinearGradient(x - len, y - len, x, y);
		tra.addColorStop(0, 'rgba(0,0,0,0)');
    	        tra.addColorStop(1, 'rgba(255,255,255,1)');
		cxt.strokeStyle = tra;
		cxt.moveTo(x, y);
		cxt.lineTo(x - len, y - len);
		cxt.fill();
		cxt.stroke();
		cxt.closePath();
	
}    

大概就这样子，细节就自己研究吧！！！！

有活要干~~~　　

See the Pen Moon by to_Matthew (@to_Matthew) on CodePen.

<----------------------其实下一步是准备做，canvas和鼠标之间的交互-------------------------->

先做一下自我提示，点击事件

canvas.onxxx,等到当前的屏幕的clickX，Y。用canvas.getBoundingClientRect()   (x:x-canvas.getBoundingClientRect().left , y:y-canvas.getBoundingClientRect().top)

得到相对canvas的X,Y值。

然后可以比较canvas点的数据X,Y值。

然后就是做相应的交互啦~~~~~