【用三大件写出的开门烟花特效】

🕗 发布于 2024-03-19 08:55 前端 html javascript

又到了一年一度的春节时期啦！昨天呢是北方的小年，今天是南方的小年，看到大家可以愉快的放烟花，过大年很是羡慕呀！辞旧岁，贺新春，今年我呀要放烟花，过春节！🧨。

这个特效简单的使用了前端三件套即可完成，html，js，css，canvas整体效果如下GIF图所示（码内隐藏特殊变量，找到有惊喜！）

背景音乐是《China-E》个人感觉很有新年的感觉，整个China系列的歌曲都很nice，该特效的寓意就是开门大吉，辞旧迎新，2023年的大门向你敞开，新的一年想你招手，小兔子抱着锦鲤，也预示着吉祥，山鱼在这里祝大家前兔无量，大展宏兔！

就是开心，就是玩，就是兔个吉利！，话不多说上代码！

<body>
    <!-- 依旧是简洁的html代码 -->
    <canvas id="mycanvas"></canvas>

    <div id="box">
        <button type="button" id="unmuteButton">开启新年音乐</button>
        <button type="button" id="unmuteButton2">关闭新年音乐</button>
        <video id="video" muted autoplay src="./audio/新年音乐.mp3" loop></video>
    </div>
</body>

比较多的css代码，所以单独放在了一个文件下，如果用的时候出现图片丢失的问题，可以看看路径写对了没

/* 如果单独放记得去掉style标签哦 */
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    margin: 0;
    cursor: pointer;
    font-size: 30px;
    background: url("../img/辞旧岁贺新春兔年.png");
    background-size: 100% 100%;
}

#unmuteButton {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    font-size: 10px;
    font-family: "STHupo";
    width: 80px;
    height: 30px;
    border: 1px solid red;
    background-color: rgb(255, 115, 0);
    border-radius: 10%;
}

#unmuteButton2 {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 120px;
    font-size: 10px;
    font-family: "STHupo";
    width: 80px;
    height: 30px;
    border: 1px solid red;
    background-color: rgb(255, 115, 0);
    border-radius: 10%;
}

#video {
    position: absolute;
    top: -100000;
    left: -100000;
}

#box {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#box::before,
#box::after {
    content: '';
    z-index: 99;
    margin-top: -37px;
    float: left;
    width: 50%;
    height: 1000px;
    background: url("../img/兔子2023.png") no-repeat;
    transition: .4s;
}

#box::before {
    float: left;
    background-position: -220px 37px;
}

#box::after {
    float: right;
    background-position: -210px;
}

#box:hover::before {
    transform: translateX(-100%)
}

#box:hover::after {
    transform: translateX(100%)
}

/* 去除滚动条 */
body::-webkit-scrollbar {
    width: 0 !important
}
</style>

比比比比较多的js代码，注意同上

// 烟花生成
window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000)
        }
})();
// 获取画布
var area = document.getElementById("mycanvas");
area.width = document.documentElement.clientWidth;
area.height = document.documentElement.clientHeight;

var ctx = area.getContext("2d");

hue = 120;
timerTick = 0;
timerTotal = 5;
fireworks = [];
particles = [];

function random(min, max) {
    return Math.random() * (max - min) + min;
}

function distans(sx, sy, tx, ty) {
    var xdistan = sx - tx;
    var ydistan = sy - ty;
    return Math.sqrt((Math.pow(xdistan, 2) + Math.pow(ydistan, 2)));
}

function Firework(sx, sy, tx, ty) {
    this.x = sx;
    this.y = sy;
    this.sx = sx;
    this.sy = sy;
    this.tx = tx;
    this.ty = ty;

    this.targetDistances = distans(sx, sy, tx, ty);

    this.distancesc = 0;

    this.shanyu = [];
    this.shanyucount = 3;
    while (this.shanyucount--) {
        this.shanyu.push([this.x, this.y]);
    }

    this.angle = Math.atan2(ty - sy, tx - sx);
    this.speed = 2;
    this.jiasudu = 1.05;
    this.brightness = random(50, 70);
    this.targetRad = 5;
}

Firework.prototype.update = function (index) {
    this.shanyu.pop();
    this.shanyu.push([this.x, this.y]);

    if (this.targetRad < 8) {
        this.targetRad += 0.3;
    } else {
        this.targetRad = 1;
    }

    this.speed *= this.jiasudu;
    var vx = Math.cos(this.angle) * this.speed;
    var vy = Math.sin(this.angle) * this.speed;

    this.distancesc = distans(this.sx, this.sy, this.x + vx, this.y + vy);

    if (this.distancesc >= this.targetDistances) {

        createparticals(this.tx, this.ty);

        fireworks.splice(index, 1)
    } else {
        this.x += vx;
        this.y += vy;
    }
}


Firework.prototype.draw = function () {
    ctx.beginPath();

    ctx.moveTo(this.shanyu[this.shanyu.length - 1][0], this.shanyu[this.shanyu.length - 1][1]);

    ctx.lineTo(this.x, this.y);

    ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(this.tx, this.ty, this.targetRad, 0, Math.PI * 2);
    ctx.stroke();
}

function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.shanyu = [];
    this.shanyucount = 10;
    while (this.shanyucount--) {
        this.shanyu.push([this.x, this.y]);
    }

    this.angle = random(0, 2 * Math.PI);
    this.speed = random(1, 10);
    this.mocal = 0.95;
    this.gravity = 0.98;
    this.hue = random(hue - 20, hue + 20);
    this.brightness = random(50, 80);
    this.alpha = 1;
    this.decay = random(0.015, 0.03);
}

Particle.prototype.update = function (index) {
    this.shanyu.pop();
    this.shanyu.unshift([this.x, this.y]);
    this.speed *= this.mocal;
    this.x += Math.cos(this.angle) * this.speed;
    this.y += Math.sin(this.angle) * this.speed + this.gravity;
    this.alpha -= this.decay;
    if (this.alpha <= this.decay) {
        particles.splice(index, 1)
    }
}
Particle.prototype.draw = function () {
    ctx.beginPath();
    ctx.moveTo(this.shanyu[this.shanyu.length - 1][0], this.shanyu[this.shanyu.length - 1][1]);
    ctx.lineTo(this.x, this.y);
    ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
    ctx.stroke();
}

function createparticals(x, y) {
    var particalcount = 500;
    while (particalcount--) {
        particles.push(new Particle(x, y))
    }
}

var clientw = document.documentElement.clientWidth;
var clienth = document.documentElement.clientHeight;

function loop() {
    requestAnimationFrame(loop);
    hue += 0.5;
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillRect(0, 0, clientw, clienth);
    ctx.fillStyle = 'rgb(0,0,0,0.5)';
    ctx.globalCompositeOperation = 'lighter';
    var i = fireworks.length;
    while (i--) {
        fireworks[i].draw();
        fireworks[i].update(i);
    }
    var i = particles.length;
    while (i--) {
        particles[i].draw();
        particles[i].update(i);
    }
    if (timerTick >= timerTotal) {
        fireworks.push(new Firework(clientw / 2, clienth, random(0, clientw), random(0, clienth)));
        timerTick = 0;
    } else {
        timerTick++;
    }
}
window.οnlοad = loop();
window.onload = function starttime() {
    ptimer = setTimeout(starttime, 1000);
}
// 音乐控制
unmuteButton.addEventListener('click', function () {
    video.muted = false;
});
unmuteButton2.addEventListener('click', function () {
    video.muted = true;
});

结束喽，下一篇新春特效就是下一年喽！
点赞：您的赞赏是我前进的动力！ 👍
收藏：您的支持我是创作的源泉！ ⭐
评论：您的建议是我改进的良药！ ✍
山鱼的个人社区：欢迎大家加入我的个人社区—— 山鱼社区

原文地址：https://blog.csdn.net/zhaochen1127/article/details/128694568

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【CSS重点知识】属性计算的过程
下一篇：ssm/php/node/python基于web的托育园管理系统

【学习日记】notebook添加JAVA支持
作者是个大学生这个专栏主要收集课时常用的软件以及女朋友上课用的软件的教程。需提前配置好java环境本篇仅对添加支持进行说明。新开了gitcode 用于上传安装包。解压进入解压后目录复制文件地
阅读更多2024-11-15
Docker与Podman全面比较
Docker和Podman作为两大容器引擎，各自拥有独特的特点和优势。本文将从溯源、特点、技术优势、应用实例和技术前景等方面对Docker和Podman进行全面比较。
阅读更多2024-11-15
算法学习blog：day2 继续记日记
4. 明日计划：至少五道题，并且要学会并实现今天的三道题，看这五道题的思路解法，下一天进行实现优化。除此之外pdf粗略看到了20页，明天继续看，后面才是重点。1.做了三道PAT 76，77，78，差一
阅读更多2024-11-15
基于Python的网上银行综合管理系统
【2025最新】基于python+django+vue+MySQL的网上银行综合管理系统，前后端分离。
阅读更多2024-11-15
自定义注解+拦截器+jwtFilter实现权限控制
GetterSUPER_ADMIN(1, "超级管理员"),SYSTEM_ADMIN(2, "系统管理员"),DOMESTIC_CONSUMER(3, &quo
阅读更多2024-11-15
前端面试题整理-vue指令开发
在 bind 钩子中，我为绑定的元素添加了一个点击事件监听器，当元素被点击时，执行复制操作。我当时在开发点击复制文本的功能，我有很多个元素都想有这个功能，但是我又不想每个元素都绑定一个 onClick
阅读更多2024-11-15
在使用ipc通信时，在渲染进程的Vue + TypeScript 开发过程，给window对象添加属性并赋值时，发生报错解决方法
在使用ipc通信时，在渲染进程的Vue + TypeScript 开发过程，给window对象添加属性并赋值时，发生报错解决方法
阅读更多2024-11-15
GESP4级考试语法知识（贪心算法（四））
GESP4级考试语法知识（贪心算法（四））
阅读更多2024-11-15
20241114在飞凌的OK3588-C的核心板上跑Linux R4时通过iperf3测试以太网卡的实际网速
创建一个eth0配置文件，配置文件的路径为：/etc/network/interfaces.d/eth0,设置动态ip的配置文件。虽然飞凌的OK3588-C的核心板使用的是千兆网卡RTL8211
阅读更多2024-11-15
【EmbeddedGUI】脏矩阵设计说明
脏矩阵设计说明
阅读更多2024-11-15

【用三大件写出的开门烟花特效】

相关文章