zdog实现烟花绽放动画效果代码-html代码-BFW代码库

zdog实现烟花绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：zdog实现烟花绽放动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	color: hsl(187 53% 97%);
	background: radial-gradient(
			circle at 50% 50%,
			hsl(246 42% 21%),
			hsl(246 42% 13%)
		),
		hsl(246 42% 13%);
	min-block-size: 100svb;
	display: grid;
	place-items: center;
}
</style>

</head>
<body>

<canvas style="display: block; inline-size: 100%; max-inline-size: 400px" width="400" height="400"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
  
  <script >
      const { Anchor, Shape } = Zdog;

(() => {
	const element = document.querySelector("canvas");
	const context = element.getContext("2d");
	const { width, height } = element;
	const zoom = 5;

	const w = width / zoom;
	const h = height / zoom;
	const x = w / 2;
	const y = h / 2;

	const columns = 10;
	const rows = 10;
	const gx = w / columns;
	const gy = h / rows;

	const radius = w / 4;
	const number = 16;

	const PI = Math.PI;
	const TAU = PI * 2;
	const points = Array(number)
		.fill()
		.map((_, i, { length }) => {
			const theta = PI * -1 + (TAU / length) * i;
			const points = Array(number)
				.fill()
				.map((_, j, { length }) => {
					const a = PI * -1 + (TAU / length) * j;
					const x = radius * Math.sin(theta) * Math.cos(a);
					const y = radius * Math.sin(theta) * Math.sin(a);
					const z = radius * Math.cos(theta);

					return { x, y, z };
				});
			return points;
		})
		.flat();

	const colors = {
		sky: "hsl(246 42% 21%)",
		lights: "hsl(187 53% 97%)",
		firework: ["hsl(359 87% 74%)", "hsl(209 95% 72%)", "hsl(243 62% 76%)"]
	};

	const strokes = [0.4, 0.8];

	const root = new Anchor();

	const background = new Shape({
		addTo: root,
		color: colors.sky,
		stroke: 0,
		fill: true,
		path: [
			{ x: 0, y },
			{
				bezier: [
					{ x, y },
					{ x, y },
					{ x, y: 0 }
				]
			},
			{
				bezier: [
					{ x, y: y * -1 },
					{ x, y: y * -1 },
					{ x: 0, y: y * -1 }
				]
			},
			{
				bezier: [
					{ x: x * -1, y: y * -1 },
					{ x: x * -1, y: y * -1 },
					{ x: x * -1, y: 0 }
				]
			},
			{
				bezier: [
					{ x: x * -1, y },
					{ x: x * -1, y },
					{ x: 0, y }
				]
			}
		],
		translate: {
			z: radius * -1
		}
	});

	const lights = new Anchor({
		addTo: root,
		translate: {
			z: radius * 2
		},
		scale: 0.8
	});

	const planets = new Anchor({
		addTo: lights
	});

	const stars = new Anchor({
		addTo: lights
	});

	const planet = new Shape({
		color: colors.lights
	});

	const star = new Shape({
		color: colors.lights,
		stroke: 0,
		fill: true,
		path: [
			{ x: 0, y: -1 },
			{ x: 1, y: 0 },
			{ x: 0, y: 1 },
			{ x: -1, y: 0 }
		]
	});

	for (let i = 0; i < columns; i++) {
		for (let j = 0; j < rows; j++) {
			if (Math.random() &g.........完整代码请登录后点击上方下载按钮下载查看