js模拟制作超逼真的雪花效果

《春雪》

唐·东方虬

春雪满空来，触处似花开。

不知园里树，若个是真梅。

《红林擒近·寿词·满路花》

宋·陈允平

三万六千顷，玉壶天地寒。庾岭封的皪，淇园折琅。漠漠梨花烂漫，纷纷柳絮飞残。直疑潢潦惊翻，斜风溯狂澜。

对此频胜赏，一醉饱清欢。呼童翦韭，和冰先荐春盘。怕东风吹散，留尊待月，倚阑莫惜今夜看。

在陈允平笔下，雪是绝美的。

人生当如这漫天的飞雪，肆意地飘洒。这是我对人生的感悟。

今天我们用js来模拟雪，让雪花飞扬在代码的世界，因为喜欢雪，我收集了一些关于雪的代码。

js制作的透明超炫酷雪花效果 (mubanmao.top)

js制作的漂亮雪花图案

js制作的唯美温柔落雪效果

js制作的超唯美雪花飘落效果

雪舞飞花，醉人如痴！

代码欣赏：

var G1Code;
(function() {
	G1Code = function(x, y) {
		var self = this;
		self.x = x;
		self.y = y;
	};
 
	var members = {
 
		toString: function() {
			var self = this;
			// Added rounding
			return "G1 X" + self.x.toFixed(2) + " Y" + self.y.toFixed(2);
		},
 
		// Rotate the XY point of the GCode
		rotate: function(theta) {
			var self = this;
			var oldX = self.x;
			var oldY = self.y;
			self.x = oldX * Math.cos(theta) - oldY * Math.sin(theta);
			self.y = oldX * Math.sin(theta) + oldY * Math.cos(theta);
		},
 
		// Add relative moves
		relative_move: function(xMove, yMove) {
			var self = this;
			var oldX = self.x;
			var oldY = self.y;
			self.x = oldX + xMove;
			self.y = oldY + yMove;
		},
 
		// Clone Method
		clone: function() {
			var self = this;
			return new G1Code(self.x, self.y);
		}
	}
 
	// Copy over members to prototype
	for (var key in members) {
		G1Code.prototype[key] = members[key];
	};
})();
 
 
var PolyLine;
(function() {
	PolyLine = function() {
		this.listofcodes = [];
	};
 
	var members = {
 
		toString: function() {
			var self = this;
			var output = "";
			for(gcode in self.listofcodes) {
				output += self.listofcodes[gcode] + "\n"
			}
			return output;
		},
 
		draw: function(ctx) {
			var self = this;
 
			ctx.beginPath();
			var code = self.listofcodes[0];
			ctx.moveTo(code.x, code.y);
 
			for(var n=1; n < self.listofcodes.length; n++) {
				code = self.listofcodes[n];
				ctx.lineTo(code.x, code.y);
			}
			ctx.closePath();
		},
 
		// add a single G1Code to the list
		append: function(gcode) {
			var self = this;
			self.listofcodes.push(gcode);
		},
 
		// add another PolyLine to the end of this PolyLine
		extend: function(polyline) {
			var self = this;
			for(gcode in polyline.listofcodes) {
				self.listofcodes.push(polyline.listofcodes[gcode].clone());
			}
		},
 
		// method to make a clone of the myPolyLine
		clone: function() {
			var self = this;
			var cloned = new PolyLine();
			for(gcode in self.listofcodes) {
				cloned.append(self.listofcodes[gcode].clone());
			}
			return cloned;
		},
 
		// rotate each individual G1Code within
		rotate: function(angle) {
			var self = this;
			for(gcode in self.listofcodes) {
				self.listofcodes[gcode].rotate(angle);
			}
		},
 
		// mirror the list of G1Codes around the x axis
		// this may be a counter-intuitive name - rename to mirrorY?
		mirrorX: function() {
			var self = this;
			for(gcode in self.listofcodes) {
				self.listofcodes[gcode].y = -1*(self.listofcodes[gcode].y);
			}
		},
 
		// reverse the order of the list of G1Codes
		reverse: function() {
			var self = this;
			self.listofcodes.reverse();
		}
	};
 
	// Copy over members to prototype
	for (var key in members) {
		PolyLine.prototype[key] = members[key];
	};
})();
 
var Snowflake;
(function() {
	Snowflake = function(options) {
 
		this.options = {
 
			/** {Integer} Number of arms of the snowflake */
			numArms: 6,
 
			/** {Integer} Length of arms of the snowflake */
			armLength: 100,
 
			/** {Integer} Thickness of arms of the snowflake */
			armThickness: 3,
 
			/** {Integer} Number of spikes on the arms of the snowflake */
			numSpikes: 4,
 
			/** {Number}  */
			spacer: 0.5
 
		};
 
		for (var key in options) {
			this.options[key] = options[key];
		}
 
		this.__gapSize = (this.options.armLength/this.options.numSpikes)/2;
	};
 
	/*
	---------------------------------------------------------------------------
		PRIVATE FUNCTIONS
	---------------------------------------------------------------------------
	*/
 
	/**
	 * Generates a random integer that is between two integers.
	 *
	 * @param from {Integer} The integer to start from.
	 * @param to {Integer} The integer to end with.
	 *
	 * @return {Integer} Random integer in between the two given integers.
	 **/
	function randomInt(from, to) {
		return Math.floor(Math.random() * (to - from + 1) + from);
	};
 
	/**
	 * @param degrees {Number} Angle in degrees
	 *
	 * @return {Number} Angle in radians
	 **/
	function radians(degrees) {
		return degrees*(Math.PI/180);
	};
 
	var members = {
		/*
		---------------------------------------------------------------------------
			INTERNAL FIELDS ::
		---------------------------------------------------------------------------
		*/
 
		/** {Number} Set in constructor */
		__gapSize: 0,
 
 
 
		/*
		---------------------------------------------------------------------------
			PUBLIC API
		---------------------------------------------------------------------------
		*/
 
		/**
		 * Draws the snowflake
		 *
		 * @param ctx {2D Context} The 2D graphics context from a canvas element.
		 */
		draw: function(ctx) {
 
			var self = this;
 
			var spikyArm = new PolyLine(),
				thisGCode = new G1Code(self.options.armThickness, self.options.armThickness/2);
			spikyArm.append(thisGCode);
 
			var angle = radians(30);
			for(var n=0; n < self.options.numSpikes; n++) {
				var spikeLength = Math.random()*(self.options.armLength/2),
					// spikeLength = arm_length/2.0,
					x1 = self.options.spacer + self.__gapSize*(n*2),
					y1 = self.options.armThickness/2,
					x2 = self.options.spacer + x1 + spikeLength*Math.cos(angle),
					y2 = spikeLength*Math.sin(angle),
					x3 = self.options.spacer + x1 + self.__gapSize,
					y3 = self.options.armThickness/2;
				spikyArm.append(new G1Code(x1, y1));
				spikyArm.append(new G1Code(x2, y2));
				spikyArm.append(new G1Code(x3, y3));
			};
 
			thisGCode = new G1Code(self.options.armLength, self.options.armThickness/2);
			spikyArm.append(thisGCode);
 
			// make a mirror image of the first half of the arm
			otherHalf = spikyArm.clone();
			otherHalf.mirrorX();
			otherHalf.reverse();
 
			// make a pointy tip
			thisGCode = new G1Code(self.options.armLength+(self.options.armLength/10), 0);
 
			// join em together
			spikyArm.append(thisGCode);
			spikyArm.extend(otherHalf);
 
			// join together 6 rotated copies of the spiky arm
			var thisGCodeStar = new PolyLine();
			for(var a=0; a < self.options.numArms; a++) {
				spikyArm.rotate(radians(-(360/self.options.numArms)));
				thisGCodeStar.extend(spikyArm);
			}
 
			thisGCodeStar.draw(ctx);
 
		}
	}
 
	// Copy over members to prototype
	for (var key in members) {
		Snowflake.prototype[key] = members[key];
	}
 
})();