佩服妹子能写出这么牛逼的Canvas效果

[joyjoe]

先膜拜一下妹子

提几点建议

1. 代码应该精简 既然都用到构造函数了，那就应该把draw和cache里面绘制圆点的代码封装成一个原型链上的函数。 绘制多点之间连线的代码也可以通过循环来精简。另外在”点“对象代码中，有一些冗余的context属性设置，比如alpha等等。还可以考虑将Star和Dot的关系整合成父子继承关系，优化代码结构和提高性能。
2. 配置项可以扩展 可以多设置些配置项，这样能够更好体现个性化。比如：颜色，多点连线的条数。 颜色值，可以放入配置中，这样不用局限于默认的白色。多点之间连线的条数，可以方便用循环代码来实现。不用像现在这样，写出毫无扩展性的代码。
3. 扩展思维 在重绘函数drawIfMouseMoving中，是否可以考虑通过判断用户鼠标移动方向来设置Variable这样的偏移值方向，而不是目前这种随机方向。

下面把我个人优化后的代码贴出来，有错误欢迎指正。

[joyjoe]

;(function(global, factory){ "use strict"; if(typeof module === "object" && typeof module.exports === "object"){ // Node.js module.exports = global.document?factory(global, true):function(w){ if(!w.document){ throw new Error("require a window with a document"); } return factory(w); } }else{ factory(global); } })(typeof window !== "undefined"?window:this, function(window, noGlobal){ "use strict"; var config = { star_r: 3,//star半径 star_alpha: 10, //5,//star透明度 initPopulation: 150,//star总个数 moveDistance: 0.25,//star移动距离 dot_r: 5,//dot半径 dot_speeds: 0.5,//dot速度 dot_alpha: 0.5,//dot透明度 dot_aReduction: 0.01,//dot消失透明度条件 dotsMinDistance: 5,//dot之间最短距离 dotsMaxDistance: 50,//dot之间最长距离 linkCount: 5 };

var stars = [],
	dots = [],
	canvas = null,
	ctx = null,
	WIDTH = document.documentElement.clientWidth,
	HEIGHT = document.documentElement.clientHeight,
	mouseMoving = false,
	mouseMoveChecker,
	mouseX,
	mouseY;

function StarGlitter(container, obj){
	function init(){
		var _node = null;
		if(typeof(container) === "string"){
			if(container[0]==="."){
				_node = document.getElementsByClassName(container.substr(1))[0];
			}else if(container[0]==="#"){
				_node = document.getElementById(container.substr(1));
			}
		}else if(container instanceof HTMLElement){
			_node = container;
		}
		canvas = _node;
		canvas.setAttribute("width", WIDTH);
		canvas.setAttribute("height", HEIGHT);
		ctx = canvas.getContext("2d");
		// config
		if(obj instanceof Object){
			for(var item in obj){
				config[item] = obj[item];
			}
		}
		ctx.strokeStyle = "white";
		ctx.shadowColor = "white";
		for(var i = 0; i < config.initPopulation; i++){
			stars[i] = new Star(i, Math.floor(Math.random() * WIDTH), Math.floor(Math.random() * HEIGHT), true);
		}
	}
	function animate(){
		ctx.clearRect(0,0,WIDTH,HEIGHT);
		for(var i in stars){
			stars[i].move();
		}
		for(var i in dots){
			dots[i].move();
		}
		renderDraw();
		requestAnimationFrame(animate);
	}
	document.onmousemove = function(e){

			mouseMoving = true;
			mouseX = e.clientX;
			mouseY = e.clientY;
			clearInterval(mouseMoveChecker);
			mouseMoveChecker = setInterval(function(){
				mouseMoving = false;
			}, 20);
	}
	init();
	animate();
};


// 绘制star
function Star(id, x, y, useCache){
	this.init(id, x, y, useCache);
}

Star.prototype = {
	constructor: Star,
	init: function(id, x, y, useCache){
		this.id = id;
		this.x = x;
		this.y = y;
		this.useCache = useCache;
		this.cacheCanvas = document.createElement("canvas");
		this.cacheCtx = this.cacheCanvas.getContext("2d");
		this.r = Math.floor(Math.random() * config.star_r) + 1;
		this.cacheCtx.width = this.r * 6;
		this.cacheCtx.height = this.r * 6;
		var alpha = (Math.floor(Math.random() * 10) + 1) / config.star_alpha;
		this.color = "rgba(255,255,255,"+ alpha +")";
		if(this.useCache){
			this.cache();
		}else{
			this.draw();
		}
	},
	_render: function(ctx, x, y, r, start, end, flag, color){
		ctx.save();
		ctx.fillStyle = color || this.color;
		ctx.shadowColor = "white";
		ctx.shadowBlur = r * 2;
		ctx.beginPath();
		ctx.arc(x, y, r, start, end, flag);
		ctx.closePath();
		ctx.fill();
		ctx.restore();
	},
	draw: function(){
		if(this.useCache){
			ctx.drawImage(this.cacheCanvas, this.x - this.r, this.y - this.r);
		}else{
			this._render(ctx, this.x, this.y, this.r, 0, Math.PI * 2, false);
		}
	},
	cache: function(){
		this._render(this.cacheCtx, this.r * 3, this.r * 3, this.r, 0, Math.PI * 2, false);
	},
	move: function(){
		this.y -= config.moveDistance;
		if(this.y <= -10){
			this.y += (HEIGHT + 10);
		}
		this.draw();
	},
	die: function(){
		stars[this.id] = null;
		delete stars[this.id];
	}
}

function Dot(id, x, y, useCache){
	this.init(id, x, y, useCache);
}

Dot.prototype = {
	constructor: Dot,
	init: function(id, x, y, useCache){
		this.id = id;
		this.x = x;
		this.y = y;
		this.r = Math.floor(Math.random() * config.dot_r) + 1;
		this.speed = config.dot_speeds;
		this.a = config.dot_alpha;
		this.aReduction = config.dot_aReduction;
		this.useCache = useCache;
		this.dotCanvas = document.createElement("canvas");
		this.dotCtx = this.dotCanvas.getContext("2d");
		this.dotCtx.width = this.r * 6;
		this.dotCtx.height = this.r * 6;
		this.color = "rgba(255,255,255,"+ this.a +")";
		this.dir = Math.floor(Math.random() * 140) + 200;
		this.linkCount = config.linkCount;
		if(useCache){
			this.cache();
		}else{
			this.draw();
		}
	},
	_render: function(ctx, x, y, r, start, end, flag, color){
		ctx.save();
		ctx.fillStyle = color || this.color;
		ctx.shadowColor = "white";
		ctx.shadowBlur = r * 2;
		ctx.beginPath();
		ctx.arc(x, y, r, start, end, flag);
		ctx.closePath();
		ctx.fill();
		ctx.restore();
	},
	draw: function(){
		if(!this.useCache){
			this._render(ctx, this.x, this.y, this.r, 0, Math.PI *2 , false);
		}else{
			ctx.drawImage(this.dotCanvas, this.x - this.r * 3, this.y - this.r * 3);
		}
	},
	cache: function(){
		this._render(this.dotCtx, this.r * 3, this.r * 3, this.r, 0, Math.PI *2 , false);
	},
	link: function(){
		if(this.id == 0){
			return;
		}
		// 可以考虑其他连线策略
		ctx.beginPath();
		ctx.strokeStyle = this.linkColor;
		for(var i = 0; i <= this.linkCount; i++){
			var previousDot = getPreviousDot(this.id, i + 1);
			if(previousDot){
				if(i == 0){
					ctx.moveTo(previousDot.x, previousDot.y);
					ctx.lineTo(this.x, this.y);
				}else{
					ctx.lineTo(previousDot.x, previousDot.y);
				}
			}else{
				break;
			}
		}
		ctx.stroke();
		ctx.closePath();
	},
	move: function(){
		this.a -=this.aReduction;
		if(this.a <= 0){
			this.die();
			return;
		}
		this.color = "rgba(255,255,255,"+ this.a +")";
		this.linkColor = "rgba(255,255,255,"+ this.a/4 +")";
		this.x = this.x + Math.cos(Math.PI/180*this.dir) * this.speed;
		this.y = this.y + Math.cos(Math.PI/180*this.dir) * this.speed;

		this.draw();
		this.link();
	},
	die: function(){
		dots[this.id] = null;
		delete dots[this.id];
	}
}

function renderDraw(){
	if(dots.length == 0){
		dots[0] = new Dot(0, mouseX, mouseY, true);
		dots[0].draw();
		return;
	}

	var previousDot = getPreviousDot(dots.length, 1);
	var prevX = previousDot.x;
	var prevY = previousDot.y;

	var diffX = Math.abs(prevX - mouseX);
	var diffY = Math.abs(prevY - mouseY);
	if(diffX < config.dotsMinDistance || diffY < config.dotsMinDistance){
		return;
	}
	// 下一个点的位置可以考虑加入鼠标移动方向的因素
	var xVariation = Math.random() > 0.5?-1:1;
	xVariation = xVariation * Math.floor(Math.random() * config.dotsMaxDistance) + 1;
	var yVariation = Math.random() > 0.5?-1:1;
	yVariation = yVariation * Math.floor(Math.random() * config.dotsMaxDistance) + 1;
	dots[dots.length] = new Dot(dots.length, mouseX+xVariation, mouseY+yVariation, true);
	dots[dots.length - 1].draw();
	dots[dots.length - 1].link();
}

function getPreviousDot(id, stepback){
	if(id == 0 || id - stepback < 0){
		return false;
	}
	if(typeof dots[id - stepback] !== "undefined"){
		return dots[id - stepback];
	}else{
		return false;
	}
}

if(!noGlobal){
	window.StarGlitter = StarGlitter;
}
return StarGlitter;

});