苏州知名高端网站建设网络公司,上海百度公司地址在哪里,可以做c oj的网站,免费网站建设朋友交流HTML5和JS实现新年礼花效果
2023兔年再见#xff0c;2024龙年来临了#xff01;
祝愿读者朋友们在2024年里#xff0c;身体健康#xff0c;心灵愉悦#xff0c;梦想成真。
下面是用HTML5和JS实现新年礼花效果#xff1a; 源码如下#xff1a;
!DOCTYPE html…HTML5和JS实现新年礼花效果
2023兔年再见2024龙年来临了
祝愿读者朋友们在2024年里身体健康心灵愉悦梦想成真。
下面是用HTML5和JS实现新年礼花效果 源码如下
!DOCTYPE html
html
headtitle新年礼花/titlestyle/* 设置画布占满整个窗口 */body {margin: 0;padding: 0;overflow: hidden;}canvas {display: block;}/style
/head
body!-- 创建一个画布 --canvas idfireworksCanvas/canvasscript// 获取canvas和contextconst canvas document.getElementById(fireworksCanvas);const ctx canvas.getContext(2d);// 设置canvas宽高为窗口的宽高canvas.width window.innerWidth;canvas.height window.innerHeight;// 初始化烟花数组let fireworks [];// 定义产生min到max之间的随机数的函数function random(min, max) {return Math.random() * (max - min) min;}// 定义烟花类class Firework {constructor(x, y, color) {this.x x;this.y y;this.particles [];this.exploded false;this.life 0;this.color color;this.explodeHeight random(canvas.height * 0.3, canvas.height * 0.6);}// 更新烟花状态的方法update() {// 如果烟花还未爆炸向上移动并增加寿命if (!this.exploded) {this.y - random(5, 10);this.life 1;// 如果烟花达到或超过爆炸高度爆炸if (this.y this.explodeHeight) {this.explode();}} else {// 如果烟花已经爆炸更新和绘制粒子this.particles.forEach((particle, index) {particle.update();if (particle.life 0) {this.particles.splice(index, 1);}});}}// 绘制烟花的方法draw() {if (!this.exploded) {ctx.fillStyle this.color;ctx.beginPath();ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);ctx.fill();} else {this.particles.forEach((particle) particle.draw());}}// 烟花爆炸的方法explode() {this.exploded true;for (let i 0; i 100; i) {const angle random(0, Math.PI * 2);const speed random(1, 4);this.particles.push(new Particle(this.x, this.y, angle, speed, this.color));}}}// 定义粒子类class Particle {constructor(x, y, angle, speed, color) {this.x x;this.y y;this.angle angle;this.speed speed;this.life random(50, 100);this.color color;}// 更新粒子状态的方法update() {this.x Math.cos(this.angle) * this.speed;this.y Math.sin(this.angle) * this.speed;this.speed * 0.99;this.life - 1;}// 绘制粒子的方法draw() {ctx.fillStyle this.color , (this.life / 100) );ctx.beginPath();ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);ctx.fill();}}// 动画函数function animate() {// 绘制背景ctx.fillStyle rgba(0, 0, 0, 0.2);ctx.fillRect(0, 0, canvas.width, canvas.height);// 以5%的概率添加新烟花if (Math.random() 0.05) {const x random(0, canvas.width);const y canvas.height;const fireworkColor hsla( random(0, 360) , 100%, 50%;fireworks.push(new Firework(x, y, fireworkColor));}// 更新和绘制烟花for (let i fireworks.length - 1; i 0; i--) {fireworks[i].update();fireworks[i].draw();if (fireworks[i].exploded fireworks[i].particles.length 0) {fireworks.splice(i, 1);}}// 显示文字ctx.font 50px Arial;ctx.fillStyle pink;ctx.textAlign center;ctx.fillText(2024年龙年快乐, canvas.width / 2, canvas.height / 2);// 继续下一帧动画requestAnimationFrame(animate);}// 启动动画animate();// 监听窗口大小变化重新设置画布大小window.addEventListener(resize, function() {canvas.width window.innerWidth;canvas.height window.innerHeight;});/script
/body
/htmlOK
