Canvas放个烟花

hpz1223

已于 2025-01-01 20:36:49 修改

阅读量789

点赞数 12

分类专栏： JavaSrcipt Canvas 文章标签： javascript canvas 烟花效果

于 2025-01-01 20:33:05 首次发布

本文链接：https://blog.youkuaiyun.com/qq_54140719/article/details/144850527

版权

文章目录

一、效果图
二、制作
三、源码
四、参考资料

一、效果图

在这里插入图片描述

在这里插入图片描述
由于GIF图帧率的限制，画面不是非常流畅，运行画面是比较流畅的

二、制作

1、首先在html页面上创建canvas元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./firework.css">
    <title>🎇烟花</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="./firework.js"></script>
</body>
</html>

<link rel="stylesheet" href="./firework.css">引入基础的css设置一下样式，然后引入<script src="./firework.js"></script>我们的js文件，烟花实现的主要代码在这个文件里面，注意引入顺序，应该在元素渲染完成后再执行js，或者可以给script标签添加defer属性，使其在渲染完成后再加载js文件

2、基础样式设置

创建firework.css文件，进行简单的样式设置：

* {
   
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
   
    background-color: black;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
canvas {
   
    position: relative;
}

3、编写

(1)基础设置

获取页面的canvas元素，并设置画布的宽高，获取其上下文。

const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 获取canvas的上下文
const ctx = canvas.getContext('2d');

烟花分为烟花弹和爆炸粒子，所以我们要定义两个数组来存放，一边后面对其进行统一的操作。

/** 烟花弹数组 */
const fireworksArray = [];
/** 粒子数组 */
const particlesArry = [];

(2)定义烟花弹类

烟花弹类由constructor()构造函数，update()更新函数，draw()绘制函数构成。整体上先更新，再绘制，重复此操作以到达动态效果。

/**
 * 烟花弹类
 * @param {number} thick 烟花的大小
 */
class Firework {
   
    constructor(thick = 2) {
   
        this.y = canvas.height;
        //水平位置随机
        this.x = Math.random() * canvas.width | 0;
        // 重力参数
        this.vel = -(Math.random() * Math.sqrt(canvas.height) / 3 + Math.sqrt(4 * canvas.height) / 2) / 5;
        // 颜色随机
        this.c = "hsl(" + (Math.random() * 360 | 0) +",100%,60%)";
        // 烟花大小
        this.thick = thick;
    }
    update() {
   
        /** y轴坐标减少，达到上升的效果，坐标原点默认再左上角 */
        this.y += this.vel;
        this.vel += 0.04;
        // 当vel = 0时，烟花到达最高点，产生爆炸粒子，并高度重置
        if(this.vel >= 0) {
   
            // 每个爆炸产生的粒子数范围（可剥离）
            const count = getRandomInt(50,250);
            for (let i = 0; i < count; i

最低0.47元/天解锁文章