canvas火焰

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";
const W   = 40;
const H   = 80;
const S   = 5;
const mtx = new Uint16Array((W + 1) * H);
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d", {lowLatency: true, alpha: false});
canvas.width = W * S;
canvas.height = H * S;
let xm = 20;
let ym = 74;
const move = (e) => {
	let p = e;
	if (e.type === "touchmove") {
		e.preventDefault();
		p = e.targetTouches[0];
	}
	xm = Math.round((p.clientX - canvas.offsetLeft) / S);
	ym = Math.round((p.clientY - canvas.offsetTop) / S);
}
canvas.addEventListener("mousemove", move, false);
canvas.addEventListener("touchmove", move, false);
const flame = () => {
	requestAnimationFrame(flame);
	if(xm > 1 && xm < W - 1 && ym > 1 && ym < H - 1){
		mtx[ym * W + xm] = 0 + 8192 * Math.random();
	}
	for(let i = 1; i < H - 1; i++) {
		for(let j = 1; j < W - 1; j++) {
			const p  = i * W + j;
			const ap = p + W - Math.round(Math.random());
			const ncb = mtx[p];
			const nc = Math.round((mtx[ap] + mtx[ap + 1] + mtx[ap - W] + mtx[ap - W + 1]) * 0.485 * Math.random());
			mtx[p] = nc;
			if (nc  !== ncb) {
				const z =  -ym + i;
				ctx.fillStyle = `rgb(${Math.round(nc * 4)}, ${Math.round(nc * 2)},${Math.round(nc * 0.001 * z * z * z)})`;
				ctx.fillRect(j * S, i * S, S - 1, S - 1);
			}
		}
	}
}
flame();

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