进阶烟花效果

最新推荐文章于 2024-12-06 09:42:09 发布

HAI6545

最新推荐文章于 2024-12-06 09:42:09 发布

阅读量316

点赞数 1

分类专栏： JavaScript案例文章标签： vue.js css html

本文链接：https://blog.youkuaiyun.com/HAI6545/article/details/122439801

版权

本文详细介绍了如何结合Vue.js框架和CSS技术，创建出炫酷的烟花绽放效果。通过Vue组件化开发，动态控制烟花的发射、上升和爆炸，结合CSS3动画实现粒子视觉效果，为网页增添节日气氛。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        canvas {
            background-color: black;
            /* border: 1px red solid; */
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>


</body>
<script>
    // /首先我们创建一些全局变量
    // 创建一块画布
    let canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        // 获取屏幕的宽度和高度
        cw = window.innerWidth,
        ch = window.innerHeight,
        // 保存烟花的数组
        fireworks = [],
        // 保存烟花颗粒的数组
        particles = [],
        // 后面画图是会用到hsl模式，这个是颜色的初始值
        hue = 120,
        // 记录鼠标的坐标
        mx, my,
        // 把画布的长和宽设置为屏幕的长和宽
        limiterTotal = 80,
        limiterNow = 0;
    canvas.width = cw;
    canvas.height = ch;

    // 写几个辅助函数
    function random(min, max) {
        // 返回给定区间的随机数，方便后面随机数的产生
        return Math.random() * (max - min) + min;
    }

    function calculateDistance(p1x, p1y, p2x, p2y) {
        var xDistance = p1x - p2x,
            yDistance = p1y - p2y;
        // 初中学过的两点间的距离公式
        return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
    }

    基本工作准备完毕，开始写我们的烟花对象，
    ///我是采用原型链的方式进行对象的创建

    //Firework cl