颗粒涂料

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const canvas = {
	main: document.querySelector('.canvas'),
	os: document.createElement('canvas')
};

const ctx = {
	main: canvas.main.getContext('2d'),
	os: canvas.os.getContext('2d')
};

let config = {
		spacing: 8,
		width: 0,
		height: 0
	},
	particles = [];

class Particle {
	constructor(x, y) {
		this.color = ``;
		this.speed = 4 * Math.random() + 1;
		this.previousPosition = { x: x, y: y };
		this.position = { x: x, y: y };
		this.velocity = { x: 0, y: 0 };
	}
	update() {
		let data = ctx.os.getImageData(this.position.x, this.position.y, 1, 1).data,
			theta = ((data[0] + data[1] + data[2]) / 765) * 2 * Math.PI;
		this.color = `rgb(${data[0]},${data[1]},${data[2]})`;
		this.velocity.x = Math.cos(theta) * this.speed;
		this.velocity.y = Math.sin(theta) * this.speed;
		this.previousPosition.x = this.position.x;
		this.previousPosition.y = this.position.y;
		this.position.x += this.velocity.x;
		this.position.y += this.velocity.y;
	}
}

window.onload = init;

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg