用代码实现一场烟花盛宴，提前祝大家2022新春快乐

前言

很快就要过年了

用一场美丽的烟火，祝xdm新年快乐🎉🎉🎉

“我自己是一名从事了6年web前端开发的老程序员，今年年初我花了一个月整理了一份最适合2021年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“web”即可领取

效果预览

pc端

移动端

小打小闹

烟花盛宴

实现步骤

具体实现步骤如下

创建画布

setup和draw是p5.js的两个主函数，里头的createCanvas用于创建画布的大小，background来设置画布的背景颜色

function setup() {
    createCanvas(1303 / 2, 734 / 2)
}
function draw() {
    background(50);
}
复制代码

设置成1303/2和734/2，为了截图，在掘金还展示，后面会改

画烟花粒子

考虑到会有很多，通过一个函数Particle来生成，代码如下

var firework;
function Particle(x, y) {
    this.pos = createVector(x, y)
    this.vel = createVector(0, 0)
    this.acc = createVector(0, 0)
    this.update = function () {
        this.vel.add(this.acc)
        this.pos.add(this.vel)
        this.acc.mult(0)
    }
    this.show = function () {
        point(this.pos.x, this.pos.y)
    }
}
复制代码

这里用createVector创建了3个包含幅度和方向的p5向量pos、vel、acc，可以理解为作用力，之后会用到，接着还有一个更新函数update,以及显示函数show

然后修改主函数的内容，首先是setup

function setup() {
    createCanvas(1303 / 2, 734 / 2)
    stroke(255)
    strokeWeight(4)
    firework = new Particle(200, 150)
}
复制代码

通过stroke设置颜色为白色，通过strokeWeight设置粒子大小为4，接着在draw

function draw() {
    background(50);
    firework.update()
    firework.show()
}
复制代码

调用firework.update()和firework.show()将烟花粒子展示出来

结果如下：

让烟花粒子随机出现在底部

修改setup中的firework，让它出现在底部的任意位置

firework = new Particle(random(width), height)
复制代码

这里的width和height表示的就是画布的宽和高

结果如下