canvas迷幻雪花

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
function setCanvasDimensions() {
	ctx.clearRect(
		canvas.width / 2,
		canvas.height / 2,
		canvas.width,
		canvas.height
	);
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	ctx.translate(canvas.width / 2, canvas.height / 2);
}

const colours = ["#FCD7A1", "#FFBED6", "#FF81CE", "#967FF2", "#4EE0D5"];
const maxLevel = 5;
const branches = 2;
const sides = Math.floor(Math.random() * 10 + 9);
const spread = Math.random() * 48 + 0.51;
const angle = Math.PI * 2 * spread;
const alpha = 0.3;

function drawLine(level, alpha) {
	if (level > maxLevel) return;
	ctx.strokeStyle = colours[level];
	ctx.globalAlpha = alpha;
	ctx.lineWidth = 2;
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(400, 0);
	ctx.stroke();

for (let i = 1; i < branches + 1; i++) {
		ctx.save();
		ctx.translate((300 * i) / (branches + 1), 0);
		ctx.scale(0.7, 0.7);
		ctx.save();

ctx.rotate(angle);
		drawLine(level + 1, alpha + level / 10);
		ctx.restore();
		ctx.save();

ctx.rotate(-angle);
		drawLine(level + 1);
		ctx.restore();

ctx.restore();
	}
}
function init() {
	for (let i = 0; i < sides; i++) {
		drawLine(0, alpha);
		ctx.rotate((Math.PI * 2) / sides);
	}
}

setCanvasDimensions();
init();

window.addEventListener("resize", () => {
	setCanvasDimensions();
	init();
});

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