canvas 随机生成点并漂移

/**
 * Created by troyxu on 16/12/6.
 */
var Dots = function (speed, alpha) {
	// 画布相关
	this.canvas;
	this.ctx;

	// 绘制点相关
	this.x;
	this.y;
	this.r;
	this.a = alpha && alpha > 0 && alpha <= 1 ? alpha : .8;

	// 移动相关
	this.speed = speed && speed > 0 ? speed : 2;
	this.sx;
	this.sy;
	this.isMouseDot = 0;
};

Dots.prototype = {
	// 初始化点的方法 x/y为可选参数 为生成点的位置 不传则随机生成
	init: function (canvas, x, y, isMouseDot) {
		this.canvas = canvas;
		this.ctx = this.canvas.getContext('2d');

		this.x = x * 2 || Math.random() * this.canvas.width;
		this.y = y * 2 || Math.random() * this.canvas.height;
		this.r = Math.random() * 6; // 随机生成 <6 的半径值

		if (isMouseDot) this.isMouseDot = 1;

		// 随机确定点的移动速度与方向 速度值在 [-this.speed, this.speed) 之间 提高数值可加快速度
		this.sx = isMouseDot ? 0 : Math.random() * this.speed * 2 - this.speed;
		this.sy = isMouseDot ? 0 : Math.random() * this.speed * 2 - this.speed;

		this.ctx.beginPath();
		this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
		this.ctx.fillStyle = 'rgba(255,255,255,' + this.a + ')';
		this.ctx.fill();
		this.ctx.closePath();
	},

	// 更新点位置
	update: function () {
		if (this.isMouseDot) return;

		this.x = this.x + this.sx;
		this.y = this.y + this.sy;

		// 点超出canvas范围时另其"重生"
		if (this.x < 0 || this.x > this.canvas.width) {
			this.init(this.canvas);
		}
		if (this.y < 0 || this.y > this.canvas.height) {
			this.init(this.canvas);
		}

		this.ctx.beginPath();
		this.ctx.arc(this.x, this.y, this.r + 0.5, 0, 2 * Math.PI);
		this.ctx.fillStyle = 'rgba(255,255,255,' + this.a + ')';
		this.ctx.fill();
		this.ctx.closePath();
	},

	// 跟踪鼠标的点的位置更新 x/y为鼠标位置
	mouseDot: function (x, y) {
		this.x = x * 2;
		this.y = y * 2;
		this.ctx.beginPath();
		this.ctx.arc(this.x, this.y, this.r + 0.5, 0, 2 * Math.PI);
		this.ctx.fillStyle = 'rgba(255,255,255,' + this.a + ')';
		this.ctx.fill();
		this.ctx.closePath();
	}
};

/**
 * Created by troyxu on 16/12/6.
 */
export default function Wonder(opts) {

	var part = document.querySelector(opts.el),
		canvas = document.createElement('canvas'),
		ctx = canvas.getContext('2d'),

		partStyle = window.getComputedStyle(part, null),
		width = parseInt(partStyle.width),
		height = parseInt(partStyle.height),
		area = width * height, // canvas区域面积
		cssText = 'width: ' + width + 'px; height: ' + height + 'px;';

	canvas.setAttribute('style', cssText);
	canvas.width = (width * 2).toString();
	canvas.height = (height * 2).toString();

	part.appendChild(canvas);

	var dotsArr = [],
		dotsNum = opts.dotsNumber || parseInt(area / 5000),
		maxDotsNum = dotsNum * 2,
		overNum = 0, // 超出最大数量的点的数量
		dotsDistance = opts.lineMaxLength || 250; // 点之间产生连线的最大距离

	//生成点
	for (var i = 0; i < dotsNum; i++) {
		var dot = new Dots(opts.speed, opts.dotsAlpha);
		if (i < dotsNum - 1) {
			dot.init(canvas);
		} else {
			dot.init(canvas, 0, 0, 1);
		}
		dotsArr.push(dot);
	}

	//鼠标事件
	var clickWithNew = opts.clickWithDotsNumber || 5;
	document.addEventListener('click', createDot);
	function createDot(e) {
		var tx = e.pageX,
			ty = e.pageY;
		if ((tx > 0 && tx < width) && (ty > 0 && ty < height)) {

			for (var i = 0; i < clickWithNew; i++) {
				var dot = new Dots(opts.speed, opts.dotsAlpha);
				dotsArr.push(dot);
				dotsNum += 1;
				dot.init(canvas, tx, ty);
			}
		}
	};
	var mouseDot, mouseDotIndex;
	canvas.addEventListener('mouseenter', mouseDotEnter);
	canvas.addEventListener('mousemove', mouseDotMove);
	canvas.addEventListener('mouseleave', mouseDotLeave);
	function mouseDotEnter(e) {
		var tx = e.pageX,
			ty = e.pageY;
		dot.init(canvas, tx, ty, 1);
	};
	function mouseDotMove(e) {
		var tx = e.pageX,
			ty = e.pageY;
		if ((tx > 0 && tx < width) && (ty > 0 && ty < height)) {
			dot.mouseDot(tx, ty);
		}
	};
	function mouseDotLeave(e) {
		dot.init(canvas);
	}

	//动画与连线
	var requestAnimFrame = requestAnimationFrame || webkitRequestAnimationFrame || oRequestAnimationFrame || msRequestAnimationFrame;
	requestAnimFrame(animateUpdate); // 兼容不同浏览器的requestAnimationFrame

	function animateUpdate() {
		ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空canvas中原有的内容

		// 更新点的位置 数量超出最大值时舍弃旧的点
		if (dotsNum > maxDotsNum) {
			overNum = dotsNum - maxDotsNum;
		}

		for (var i = overNum; i < dotsNum; i++) {
			// if (dotsArr[i].isMouseDot) console.log('aaa')
			if (dotsArr[i]) dotsArr[i].update();
		}

		// 绘制连线
		for (var i = overNum; i < dotsNum; i++) {
			for (var j = i + 1; j < dotsNum; j++) {
				// if (dotsArr[i].isMouseDot) console.log('bbb')
				// if (dotsArr[j].isMouseDot) console.log('ccc')
				var tx = dotsArr[i].x - dotsArr[j].x,
					ty = dotsArr[i].y - dotsArr[j].y,
					s = Math.sqrt(Math.pow(tx, 2) + Math.pow(ty, 2));
				if (s < dotsDistance) {
					ctx.beginPath();
					ctx.moveTo(dotsArr[i].x, dotsArr[i].y);
					ctx.lineTo(dotsArr[j].x, dotsArr[j].y);
					ctx.strokeStyle = 'rgba(255,255,255,' + (dotsDistance - s) / dotsDistance + ')';
					ctx.strokeWidth = 1;
					ctx.stroke();
					ctx.closePath();
				}
			}
		}

		requestAnimFrame(animateUpdate);
	}
}

如何使用

import Wonder from "@/utils/Wonder";
 
new Wonder({
	el: "#wonder",
	dotsNumber: 300,
	lineMaxLength: 200,
	dotsAlpha: 0.5,
	speed: 1.5,
	clickWithDotsNumber: 6
});