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值。

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

巴特西

canvas流星月亮星星银河

最新文章

热门文章