【用三大件写出的开门烟花特效】
时间：2024-04-02 13:46:07 来源：网络cs 作者：璐璐 栏目：防关联工具 阅读：
又到了一年一度的春节时期啦！昨天呢是北方的小年，今天是南方的小年，看到大家可以愉快的放烟花，过大年很是羡慕呀！辞旧岁，贺新春，今年我呀要放烟花，过春节！🧨。
这个特效简单的使用了前端三件套即可完成，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://www.kjpai.cn/news/2024-04-02/152661.html，文章来源：网络cs，作者：璐璐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。