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,
.........完整代码请登录后点击上方下载按钮下载查看