2023双旦跨年烟花 html+canvas实现（附源码）

您所在的位置：网站首页 › 2021澳门元旦跨年烟花 › 2023双旦跨年烟花 html+canvas实现（附源码）

2023双旦跨年烟花 html+canvas实现（附源码）

2024-07-07 07:08| 来源: 网络整理| 查看: 265

双旦即将到来，之前在短视频平台看到3d烟花的效果，遂在网上找了一套烟花的源码，下面跟大家分享一下，下面是视频效果，代码放在下面了！！！

HTML5+Canvas漂亮的3D烟花2024跨年特效

可以获取代码直接运行！下面有几点需要注意修改的地方，不然可能运行不太流畅

💖 💗 💓 💞 💕（喜欢的话可以给作者点个小小的赞哦）💖 💗 💓 💞 💕

1.烟花效果不展示

开始的烟花效果是使用url外链的图片生成的，但是我在运行的时候发现现在这些图片无法获取到了，所以把烟花效果全部改为canvas，将他放在了js文件夹下面的firework.js中，大概代码如下，如果想仅展示烟花的话，可以只使用这些代码就可以展示炫酷的烟花了

/* 主要是处理烟花的效果可以给背景加一个样式 body { background-color: #000000; margin: 0px; overflow: hidden; } */ var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, mousePos = { x: 400, y: 300 }, // create canvas canvas = document.createElement('canvas'), context = canvas.getContext('2d'), particles = [], rockets = [], MAX_PARTICLES = 400, colorCode = 0; // init $(document).ready(function () { document.body.appendChild(canvas); canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; setInterval(launch, 800); setInterval(loopfun, 1000 / 50); }); // update mouse position $(document).mousemove(function (e) { e.preventDefault(); mousePos = { x: e.clientX, y: e.clientY }; }); // launch more rockets!!! $(document).mousedown(function (e) { for (var i = 0; i < 5; i++) { launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6); } }); function launch() { launchFrom(mousePos.x); } function launchFrom(x) { if (rockets.length < 10) { var rocket = new Rocket(x); rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10; rocket.vel.y = Math.random() * -3 - 4; rocket.vel.x = Math.random() * 6 - 3; rocket.size = 8; rocket.shrink = 0.999; rocket.gravity = 0.01; rockets.push(rocket); } } function loopfun() { // update screen size if (SCREEN_WIDTH != window.innerWidth) { canvas.width = SCREEN_WIDTH = window.innerWidth; } if (SCREEN_HEIGHT != window.innerHeight) { canvas.height = SCREEN_HEIGHT = window.innerHeight; } // clear canvas context.fillStyle = "rgba(0, 0, 0, 0.05)"; context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); var existingRockets = []; for (var i = 0; i < rockets.length; i++) { // update and render rockets[i].update(); rockets[i].render(context); // calculate distance with Pythagoras var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2)); // random chance of 1% if rockets is above the middle var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 = 0 || distance < 50 || randomChance) { rockets[i].explode(); } else { existingRockets.push(rockets[i]); } } rockets = existingRockets; var existingParticles = []; for (var i = 0; i < particles.length; i++) { particles[i].update(); // render and save particles that can be rendered if (particles[i].exists()) { particles[i].render(context); existingParticles.push(particles[i]); } } // update array with existing particles - old particles should be garbage collected particles = existingParticles; while (particles.length > MAX_PARTICLES) { particles.shift(); } } function Particle(pos) { this.pos = { x: pos ? pos.x : 0, y: pos ? pos.y : 0 }; this.vel = { x: 0, y: 0 }; this.shrink = .97; this.size = 2; this.resistance = 1; this.gravity = 0; this.flick = false; this.alpha = 1; this.fade = 0; this.color = 0; } Particle.prototype.update = function () { // apply resistance this.vel.x *= this.resistance; this.vel.y *= this.resistance; // gravity down this.vel.y += this.gravity; // update position based on speed this.pos.x += this.vel.x; this.pos.y += this.vel.y; // shrink this.size *= this.shrink; // fade out this.alpha -= this.fade; }; Particle.prototype.render = function (c) { if (!this.exists()) { return; } c.save(); c.globalCompositeOperation = 'lighter'; var x = this.pos.x, y = this.pos.y, r = this.size / 2; var gradient = c.createRadialGradient(x, y, 0.1, x, y, r); gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")"); gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")"); gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)"); c.fillStyle = gradient; c.beginPath(); c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true); c.closePath(); c.fill(); c.restore(); }; Particle.prototype.exists = function () { return this.alpha >= 0.1 && this.size >= 1; }; function Rocket(x) { Particle.apply(this, [{ x: x, y: SCREEN_HEIGHT }]); this.explosionColor = 0; } Rocket.prototype = new Particle(); Rocket.prototype.constructor = Rocket; Rocket.prototype.explode = function () { var count = Math.random() * 10 + 80; for (var i = 0; i < count; i++) { var particle = new Particle(this.pos); var angle = Math.random() * Math.PI * 2; // emulate 3D effect by using cosine and put more particles in the middle var speed = Math.cos(Math.random() * Math.PI / 2) * 15; particle.vel.x = Math.cos(angle) * speed; particle.vel.y = Math.sin(angle) * speed; particle.size = 10; particle.gravity = 0.2; particle.resistance = 0.92; particle.shrink = Math.random() * 0.05 + 0.93; particle.flick = true; particle.color = this.explosionColor; particles.push(particle); } }; Rocket.prototype.render = function (c) { if (!this.exists()) { return; } c.save(); c.globalCompositeOperation = 'lighter'; var x = this.pos.x, y = this.pos.y, r = this.size / 2; var gradient = c.createRadialGradient(x, y, 0.1, x, y, r); gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")"); gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")"); c.fillStyle = gradient; c.beginPath(); c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true); c.closePath(); c.fill(); c.restore(); }; 2.背景音乐

原来的代码的烟花音效是通过url外链生成的，目前通过这些链接已无法获取到音乐，所以我在网上找了一些烟花音效放在了music文件夹下，直接运行代码即可；另外需要说明的是由于浏览器的限制，背景音乐不会自动播放了，只需要在页面上点击一下即可正常播放。大家如果需要使用别的背景音乐也可以在代码中修改