【JS+H5+CSS实现烟花特效】

上网的鱼！

已于 2024-07-15 18:15:28 修改

阅读量1k

点赞数 6

文章标签： javascript css 开发语言

于 2024-07-09 18:06:29 首次发布

本文链接：https://blog.csdn.net/qq_45458713/article/details/140303148

版权

效果演示

话不多说直接上代码

注意:背景图路径是picture/star.jpg，自己在同级目录先创键picture目录再下载一张图片命名为star.jpg

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Fireworks Animation</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <canvas id="fireworksCanvas"></canvas>
        <script src="script.js"></script>
    </body>
</html>

JS:

    // 获取canvas元素
    const canvas = document.getElementById('fireworksCanvas');
    const ctx = canvas.getContext('2d');

    // 设置canvas宽度和高度为窗口宽度和高度
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let fireworks = [];

    // 创建烟花类
    class Firework {
   
        constructor() {
   
            this.x = Math.random() * canvas