毕达哥拉斯树

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

{
	"use strict";
	const canvas = document.querySelector("canvas");
	const ctx = canvas.getContext("2d");
	const branch = (size, angle) => {
		size < 10 ? ctx.strokeRect(0, 0, size, size) : ctx.fillRect(0, 0, size, size);
		if (size < 2) return;
		const v1 = size * Math.cos(angle * Math.PI / 180);
		ctx.save();
		ctx.translate(size, 0);
		ctx.rotate(angle * Math.PI / 180);
		ctx.translate(-v1, -v1);
		branch(v1, 15 + Math.random() * 60);
		ctx.restore();
		const v2 = size * Math.sin(angle * Math.PI / 180);
		ctx.save();
		ctx.rotate((angle - 90) * Math.PI / 180);
		ctx.translate(0, -v2);
		branch(v2, 15 + Math.random() * 60);
		ctx.restore();
	};
	const tree = () => {
		const width = canvas.width = canvas.offsetWidth;
		const height = canvas.height = canvas.offsetHeight;
		ctx.clearRect(0, 0, width, height);
		ctx.fillStyle = "#222";
		ctx.globalCompositeOperation = "xor";
		const size = Math.min(width, height) / 7;
		ctx.save();
		ctx.translate(0.5 * width - size * 0.5, height - size);
		branch(size, 15 + Math.random() * 60);
		ctx.restore();
	};
	window.addEventListener("resize", tree, false);
	["resize", "click", "touchdown"].forEach(event => {
		document.addEventListener(event, tree, false);
	});
	tree();
}

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