"HTML5全屏烟花动画：跨年特效代码"

5星 · 超过95%的资源需积分: 4 200 浏览量更新于2024-03-22 收藏 29KB DOCX 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

黑; cursor: crosshair;}canvas {display: block;}</style></head><body><canvas id="fireworks"></canvas><script>/* create the fireworks in the canvas */var fireworks = document.getElementById('fireworks');fireworks.width = window.innerWidth;fireworks.height = window.innerHeight;var ctx = fireworks.getContext('2d');var fireworksNum = 30;var fireworksArr = [];var hue = Math.random() * 360;var startTime = new Date().getTime();function Firework() {this.x = fireworks.width / 2;this.y = fireworks.height;this.speed = Math.random() * 3 + 2;this.radius = Math.random() * 4 + 1;this.angle = Math.random() * Math.PI * 2;this.hue = hue;this.gravity = 0.2;this.dead = false;}Firework.prototype.update = function() {this.x += Math.cos(this.angle) * this.speed;this.y += Math.sin(this.angle) * this.speed;this.speed *= 0.98;this.radius *= 0.99; if (this.radius < 0.1) {this.dead = true;}};Firework.prototype.draw = function() {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fillStyle = 'hsl(' + this.hue + ', 100%, 50%)';ctx.fill();};function createFirework() {fireworksArr.push(new Firework());hue += 1; startTime = new Date().getTime();}function loop() {ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';ctx.fillRect(0, 0, fireworks.width, fireworks.height); for (var i = 0; i < fireworksNum; i++) {if (Math.random() < 0.03) {createFirework();}var firework = fireworksArr[i];firework.update();firework.draw(); if (firework.dead) {fireworksArr.splice(i, 1);fireworksNum--;}}; hue %= 360;requestAnimationFrame(loop);}loop();</script></body></html>" 这段代码展示了一个使用 HTML5 Canvas 实现的全屏烟花动画特效。在页面加载后，会创建出多个烟花对象，并在每一帧更新它们的位置和大小，从而实现动画效果。每个烟花的运动速度、半径和颜色都是随机的，使得每一次烟花的爆炸效果都有所不同。整个动画的背景色为黑色，鼠标指针显示为交叉线样式，增强了视觉效果。通过不断在画布上创建新的烟花对象，并控制它们的运动和绘制过程，实现了炫目的烟花表演效果。通过这段代码，可以看到 HTML5 Canvas 技术在动画设计中的应用。利用 Canvas 提供的绘图接口和动画循环函数，可以轻松地实现各种复杂的动画效果，为网页增添更多的视觉吸引力和交互性。这种全屏烟花动画特效不仅展示了技术的娴熟运用，也为用户带来了一场视觉盛宴。

资源详情

资源推荐