用前端html如何实现2024烟花效果

民工心事 · 2024-9-27 06:54:39

用HTML、CSS和JavaScript编写的网页，重要用于展示“2024新年快乐！”的文字情势烟花效果。下面是对代码重要部门的分析：

HTML布局

包含三个<canvas>元素，用于绘制动画。
引入百度统计的脚本。

CSS样式

设置body的背景为玄色，并使得canvas元素绝对定位，覆盖整个页面。

JavaScript 功能

百度统计脚本：页面开始时引入了百度统计的脚本，用于网页访问数据分析。
获取URL参数：GetRequest函数用于分析URL中的查询字符串参数。
烟花碎片（Shard）类：
- 每个Shard代表烟花爆炸后的一个碎片。
- 包含碎片的位置、颜色、大小、速率等属性。
- draw方法用于在canvas上绘制碎片。
- update方法用于更新碎片的位置和状态。
火箭（Rocket）类：
- 表现发射的烟花火箭。
- 包含火箭的位置、速率、颜色等属性。
- draw方法用于在canvas上绘制火箭。
- update方法用于更新火箭的位置。
- explode方法用于模拟火箭爆炸，天生多个Shard实例。
初始化和动画循环：
- 获取所有canvas元素和对应的2D渲染上下文。
- 根据屏幕大小调整字体大小，以适应屏幕宽度，并在一个canvas上绘制“2024新年快乐！”文字。
- 通过读取绘制的文字的像素数据，确定烟花爆炸的目的位置。
- 使用requestAnimationFrame创建动画循环，不绝更新和绘制火箭和碎片，模拟烟花效果。
辅助函数：
- lerp（线性插值函数）：用于平滑地在两个值之间插值，常用于动画效果中。
实验流程：
- 页面加载完成后，动画循环开始运行。
- 每隔一定帧数，天生一个新的Rocket实例，模拟火箭发射。
- 当火箭到达一定高度后，调用explode方法，天生多个Shard实例，模拟烟花爆炸。
- 碎片根据预设的目的位置移动，终极形成“2024新年快乐！”的文字形状。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <script>
  4. var _hmt = _hmt || [];
  5. (function () {
  6. var hm = document.createElement("script");
  7. hm.src = "https://hm.baidu.com/hm.js?c923daf3182a4b0ce01878475080aadc";
  8. var s = document.getElementsByTagName("script")[0];
  9. s.parentNode.insertBefore(hm, s);
  10. })();
  11. </script>
  13. <head>
  14. <meta charset="UTF-8">
  15. <title>2024，新年快乐！</title>
  16. </head>
  17. <style>
  18. body {
  19. margin: 0;
  20. overflow: hidden;
  21. background: black;
  22. }
  24. canvas {
  25. position: absolute;
  26. }
  27. </style>
  29. <body>
  31. <canvas></canvas>
  32. <canvas></canvas>
  33. <canvas></canvas>
  35. <script>
  37. function GetRequest() {
  38. var url = decodeURI(location.search); //获取url中"?"符后的字串
  39. var theRequest = new Object();
  40. if (url.indexOf("?") != -1) {
  41. var str = url.substr(1);
  42. strs = str.split("&");
  43. for (var i = 0; i < strs.length; i++) {
  44. theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
  45. }
  46. }
  47. return theRequest;
  48. }
  49. class Shard {
  50. constructor(x, y, hue) {
  51. this.x = x;
  52. this.y = y;
  53. this.hue = hue;
  54. this.lightness = 50;
  55. this.size = 15 + Math.random() * 10;
  56. const angle = Math.random() * 2 * Math.PI;
  57. const blastSpeed = 1 + Math.random() * 6;
  58. this.xSpeed = Math.cos(angle) * blastSpeed;
  59. this.ySpeed = Math.sin(angle) * blastSpeed;
  60. this.target = getTarget();
  61. this.ttl = 100;
  62. this.timer = 0;
  63. }
  64. draw() {
  65. ctx2.fillStyle = `hsl(${this.hue}, 100%, ${this.lightness}%)`;
  66. ctx2.beginPath();
  67. ctx2.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  68. ctx2.closePath();
  69. ctx2.fill();
  70. }
  71. update() {
  72. if (this.target) {
  73. const dx = this.target.x - this.x;
  74. const dy = this.target.y - this.y;
  75. const dist = Math.sqrt(dx * dx + dy * dy);
  76. const a = Math.atan2(dy, dx);
  77. const tx = Math.cos(a) * 5;
  78. const ty = Math.sin(a) * 5;
  79. this.size = lerp(this.size, 1.5, 0.05);
  81. if (dist < 5) {
  82. this.lightness = lerp(this.lightness, 100, 0.01);
  83. this.xSpeed = this.ySpeed = 0;
  84. this.x = lerp(this.x, this.target.x + fidelity / 2, 0.05);
  85. this.y = lerp(this.y, this.target.y + fidelity / 2, 0.05);
  86. this.timer += 1;
  87. } else
  88. if (dist < 10) {
  89. this.lightness = lerp(this.lightness, 100, 0.01);
  90. this.xSpeed = lerp(this.xSpeed, tx, 0.1);
  91. this.ySpeed = lerp(this.ySpeed, ty, 0.1);
  92. this.timer += 1;
  93. } else {
  94. this.xSpeed = lerp(this.xSpeed, tx, 0.02);
  95. this.ySpeed = lerp(this.ySpeed, ty, 0.02);
  96. }
  97. } else {
  98. this.ySpeed += 0.05;
  99. //this.xSpeed = lerp(this.xSpeed, 0, 0.1);
  100. this.size = lerp(this.size, 1, 0.05);
  102. if (this.y > c2.height) {
  103. shards.forEach((shard, idx) => {
  104. if (shard === this) {
  105. shards.splice(idx, 1);
  106. }
  107. });
  108. }
  109. }
  110. this.x = this.x + this.xSpeed;
  111. this.y = this.y + this.ySpeed;
  112. }
  113. }
  115. class Rocket {
  116. constructor() {
  117. const quarterW = c2.width / 4;
  118. this.x = quarterW + Math.random() * (c2.width - quarterW);
  119. this.y = c2.height - 15;
  120. this.angle = Math.random() * Math.PI / 4 - Math.PI / 6;
  121. this.blastSpeed = 6 + Math.random() * 7;
  122. this.shardCount = 15 + Math.floor(Math.random() * 15);
  123. this.xSpeed = Math.sin(this.angle) * this.blastSpeed;
  124. this.ySpeed = -Math.cos(this.angle) * this.blastSpeed;
  125. this.hue = Math.floor(Math.random() * 360);
  126. this.trail = [];
  127. }
  128. draw() {
  129. ctx2.save();
  130. ctx2.translate(this.x, this.y);
  131. ctx2.rotate(Math.atan2(this.ySpeed, this.xSpeed) + Math.PI / 2);
  132. ctx2.fillStyle = `hsl(${this.hue}, 100%, 50%)`;
  133. ctx2.fillRect(0, 0, 5, 15);
  134. ctx2.restore();
  135. }
  136. update() {
  137. this.x = this.x + this.xSpeed;
  138. this.y = this.y + this.ySpeed;
  139. this.ySpeed += 0.1;
  140. }
  142. explode() {
  143. for (let i = 0; i < 70; i++) {
  144. shards.push(new Shard(this.x, this.y, this.hue));
  145. }
  146. }
  147. }
  149. console.log(GetRequest('val').val)
  150. // INITIALIZATION
  151. const [c1, c2, c3] = document.querySelectorAll('canvas');
  152. const [ctx1, ctx2, ctx3] = [c1, c2, c3].map(c => c.getContext('2d'));
  153. let fontSize = 200;
  154. const rockets = [];
  155. const shards = [];
  156. const targets = [];
  157. const fidelity = 3;
  158. let counter = 0;
  159. c2.width = c3.width = window.innerWidth;
  160. c2.height = c3.height = window.innerHeight;
  161. ctx1.fillStyle = '#000';
  162. const text = '2024新年快乐！'
  163. let textWidth = 99999999;
  165. while (textWidth > window.innerWidth) {
  166. ctx1.font = `900 ${fontSize--}px Arial`;
  167. textWidth = ctx1.measureText(text).width;
  168. }
  170. c1.width = textWidth;
  171. c1.height = fontSize * 1.5;
  172. ctx1.font = `900 ${fontSize}px Arial`;
  173. ctx1.fillText(text, 0, fontSize);
  174. const imgData = ctx1.getImageData(0, 0, c1.width, c1.height);
  175. for (let i = 0, max = imgData.data.length; i < max; i += 4) {
  176. const alpha = imgData.data[i + 3];
  177. const x = Math.floor(i / 4) % imgData.width;
  178. const y = Math.floor(i / 4 / imgData.width);
  180. if (alpha && x % fidelity === 0 && y % fidelity === 0) {
  181. targets.push({ x, y });
  182. }
  183. }
  185. ctx3.fillStyle = '#FFF';
  186. ctx3.shadowColor = '#FFF';
  187. ctx3.shadowBlur = 25;
  189. // ANIMATION LOOP
  190. (function loop() {
  191. ctx2.fillStyle = "rgba(0, 0, 0, .1)";
  192. ctx2.fillRect(0, 0, c2.width, c2.height);
  193. //ctx2.clearRect(0, 0, c2.width, c2.height);
  194. counter += 1;
  196. if (counter % 15 === 0) {
  197. rockets.push(new Rocket());
  198. }
  199. rockets.forEach((r, i) => {
  200. r.draw();
  201. r.update();
  202. if (r.ySpeed > 0) {
  203. r.explode();
  204. rockets.splice(i, 1);
  205. }
  206. });
  208. shards.forEach((s, i) => {
  209. s.draw();
  210. s.update();
  212. if (s.timer >= s.ttl || s.lightness >= 99) {
  213. ctx3.fillRect(s.target.x, s.target.y, fidelity + 1, fidelity + 1);
  214. shards.splice(i, 1);
  215. }
  216. });
  218. requestAnimationFrame(loop);
  219. })();
  221. // HELPER FUNCTIONS
  222. const lerp = (a, b, t) => Math.abs(b - a) > 0.1 ? a + t * (b - a) : b;
  224. function getTarget() {
  225. if (targets.length > 0) {
  226. const idx = Math.floor(Math.random() * targets.length);
  227. let { x, y } = targets[idx];
  228. targets.splice(idx, 1);
  230. x += c2.width / 2 - textWidth / 2;
  231. y += c2.height / 2 - fontSize / 2;
  233. return { x, y };
  234. }
  235. }
  236. </script>
  238. </body>
  240. </html>
  复制代码
  步骤 1: 页面布局和引入脚本
- HTML定义了三个canvas元素用于绘制烟花动画。
- 引入百度统计脚本，用于收集页面访问数据。
- 步骤 2: 样式设置
- 页面背景设置为玄色，canvas元素被设置为绝对定位，覆盖整个屏幕。
- 步骤 3: JavaScript 功能实现
  
  3.1 获取URL参数
- GetRequest函数分析当前URL的查询字符串，将参数保存在一个对象中返回。
- 3.2 定义烟花碎片（Shard）类
- 每个Shard实例代表烟花爆炸后的一个碎片。
- 包含位置、颜色、大小、速率等属性。
- draw方法用于绘制碎片。
- update方法用于更新碎片的状态和位置，包罗模拟重力影响和向目的位置移动。
- 3.3 定义火箭（Rocket）类
- 每个Rocket实例代表一个发射的烟花火箭。
- 包含位置、速率、颜色等属性。
- draw方法用于绘制火箭。
- update方法用于更新火箭的位置，模拟火箭上升。
- 3.4 初始化和动画循环
- 初始化：根据屏幕大小调整字体大小，确保“2024新年快乐！”文字适应屏幕宽度，并在canvas上绘制该文字。通过读取文字像素数据来确定烟花爆炸的目的位置。
- 动画循环：使用requestAnimationFrame循环不绝更新和绘制火箭和碎片，以及检测碎片是否到达目的位置或生命周期竣事。
- 3.5 辅助函数
- lerp函数：用于在两个数值之间进行线性插值，资助平滑动画效果。
- 步骤 4: 实验动画
- 初始化画布：调整画布大小以适应窗口，绘制“2024新年快乐！”文字，并基于此文字的像素数据确定烟花目的位置。
- 启动动画循环：
  - 每隔一定时间间隔，创建一个新的Rocket实例，模拟火箭发射。
  - 更新每个火箭的位置，当火箭到达一定高度时触发爆炸，天生多个Shard实例。
  - 更新每个Shard的位置，使其朝目的位置移动。
  - 当Shard到达目的位置或生命周期竣事时，从数组中移除。
- 渲染烟花效果：通过不绝更新canvas上的火箭和碎片位置，以及绘制这些元素，形成动态的烟花效果。碎片终极会根据预设的目的位置排列，形成“2024新年快乐！”的文字形状。
- 通过这些步骤，代码实现了一个视觉吸引的新年烟花祝福动画，既展示了编程本领，也增加了节日气氛。
- explode方法在火箭到达顶点时被调用，天生多个Shard实例。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

用前端html如何实现2024烟花效果

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块