HTML5庆祝生日蛋糕烟花特效
HTML5庆祝生日蛋糕烟花特效
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>HTML5 Birthday Cake Fireworks</title><style>canvas {position: absolute;top: 0;left: 0;z-index: -1;}</style>
</head>
<body><canvas id="fireworks"></canvas><script>// 烟花特效(function () {var canvas = document.getElementById('fireworks'),ctx = canvas.getContext('2d'),fireworks = [],particles = [],hue = 120,limiterTotal = 5,limiterTick = 0,timerTotal = 80,timerTick = 0,mousedown = false,mx,my;canvas.width = window.innerWidth;canvas.height = window.innerHeight;function random(min, max) {return Math.random() * (max - min) + min;}function calculateDistance(p1x, p1y, p2x, p2y) {var xDistance = p1x - p2x,yDistance = p1y - p2y;return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 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.distanceToTarget = calculateDistance(sx, sy, tx, ty);this.distanceTraveled = 0;this.coordinates = [];this.coordinateCount = 3;while (this.coordinateCount--) {this.coordinates.push([this.x, this.y]);}this.angle = Math.atan2(ty - sy, tx - sx);this.speed = 2;this.acceleration = 1.05;this.brightness = random(50, 70);this.targetRadius = 1;}Firework.prototype.update = function (index) {this.coordinates.pop();this.coordinates.unshift([this.x, this.y]);if (this.targetRadius < 8) {this.targetRadius += 0.3;} else {this.targetRadius = 1;}this.speed *= this.acceleration;var vx = Math.cos(this.angle) * this.speed,vy = Math.sin(this.angle) * this.speed;this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);if (this.distanceTraveled >= this.distanceToTarget) {createParticles(this.tx, this.ty);fireworks.splice(index, 1);} else {this.x += vx;this.y += vy;}}Firework.prototype.draw = function () {ctx.beginPath();ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.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.targetRadius, 0, Math.PI * 2);ctx.stroke();}function createParticles(x, y) {var particleCount = 30;while (particleCount--) {particles.push(new Particle(x, y));}}function Particle(x, y) {this.x = x;this.y = y;this.coordinates = [];this.coordinateCount = 5;while (this.coordinateCount--) {this.coordinates.push([this.x, this.y]);}this.angle = random(0, Math.PI * 2);this.speed = random(1, 10);this.friction = 0.95;this.gravity = 1;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.coordinates.pop();this.coordinates.unshift([this.x, this.y]);this.speed *= this.friction;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.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);ctx.lineTo(this.x, this.y);ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';ctx.stroke();}function loop() {ctx.globalCompositeOperation = 'destination-out';ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';ctx.fillRect(0, 0, canvas.width, canvas.height);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) {if (!mousedown) {fireworks.push(new Firework(canvas.width / 2, canvas.height, random(0, canvas.width), random(0, canvas.height / 2)));timerTick = 0;}} else {timerTick++;}if (limiterTick >= limiterTotal) {if (mousedown) {fireworks.push(new Firework(canvas.width / 2, canvas.height, mx, my));limiterTick = 0;}} else {limiterTick++;}requestAnimationFrame(loop);}window.onload = function () {canvas.addEventListener('mousemove', function (e) {mx = e.pageX - canvas.offsetLeft;my = e.pageY - canvas.offsetTop;});canvas.addEventListener('mousedown', function (e) {e.preventDefault();mousedown = true;});canvas.addEventListener('mouseup', function (e) {e.preventDefault();mousedown = false;});loop();};})();</script>
</body>
</html>
以上代码使用HTML5的元素和JavaScript实现了一个简单的生日蛋糕烟花特效。在页面加载完成后，会自动启动动画，当鼠标点击页面时，会在鼠标位置发射一个烟花。
效果展示
相关文章：
HTML5庆祝生日蛋糕烟花特效
HTML5庆祝生日蛋糕烟花特效 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>HTML5 Birthday Cake Fireworks</title><style>canvas {position: absolute;top: 0;left: 0;z-index: -1;}</style> </h…...
算法套路四——反转链表
算法套路四——反转链表 算法示例一：LeetCode206. 反转链表 给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。 初始化pre为空，cur为头指针 pre指针：记录当前结点的前一个结点 cur指针：记录当…...
多线程 (六) wait和notify
🎉🎉🎉点进来你就是我的人了 博主主页：🙈🙈🙈戳一戳,欢迎大佬指点!人生格言：当你的才华撑不起你的野心的时候,你就应该静下心来学习! 欢迎志同道合的朋友一起加油喔🦾&am…...
React--》状态管理工具—Mobx的讲解与使用
目录 Mobx的讲解与使用 Mobx环境配置 Mobx的基本使用 Mobx计算属性的使用 Mobx监听属性的使用 Mobx处理异步的使用 Mobx的模块化 Mobx的讲解与使用 Mobx是一个可以和React良好配合的集中状态管理工具，mobx和react的关系相当于vuex和vue之间的关系࿰…...
有效的括号长按键入验证外星语词典字符的最短距离用栈实现队列
有效的括号来源：杭哥20. 有效的括号 - 力扣（LeetCode）bool isValid(char * s) {int szstrlen(s);char stack[sz];int k0;for (int i0;i<sz;i){if (s[i]( || s[i][ || s[i]{){stack[k]s[i];}else{if (k0){return false;}else if (s[i]} &am…...
《前端开发者的进阶之路》
前端作为Web开发的重要领域之一，不断地发展和演变着。除了基本的HTML、CSS、JavaScript技能，前端开发者需要掌握更多的进阶知识才能应对不断变化的需求。本文将介绍一些前端的进阶知识，帮助前端开发者进一步提高自己的技能水平。1.框架和库在…...
为什么说网络安全是风口行业？是IT行业最后的红利？
前言 “没有网络安全就没有国家安全”。当前，网络安全已被提升到国家战略的高度，成为影响国家安全、社会稳定至关重要的因素之一。 网络安全行业特点 1、就业薪资非常高，涨薪快 2021年猎聘网发布网络安全行业就业薪资行业最高人均33.77万&…...
使用shell 脚本,批量解压一批zip文件，解压后的文件放在以原zip文件名前10个字符的文件夹中的例子
#!/bin/bash for file in *.zip dofolder$(echo $file | cut -c 1-10)mkdir $folderunzip -q $file -d $folder doneecho "All zip files have been extracted." # 说明： # 1. for循环遍历当前目录下的所有zip文件 # 2. 使用cut命令提取zip文件名前10个字…...
01 | Msyql系统架构
目录MySQL系统架构连接器查询缓存分析器优化器执行器MySQL系统架构 大体来说，MySQL分为Server层和引擎层两部分。 Server层包含链接器、查询缓存、分析器、优化器和执行器，而引擎层负责的是数据的存储和读取，支持InnoDB、Myisam、Memory等多…...
Linux命令---设备管理
Linux setleds命令Linux setleds命令用来设定键盘上方三个 LED 的状态。在 Linux 中，每一个虚拟主控台都有独立的设定。语法setleds [-v] [-L] [-D] [-F] [{|-}num] [{|-}caps] [{|-}scroll]参数：-F：预设的选项，设定虚拟主控台的状…...
前端入门：HTML5+CSS3+JAAVASCRIPT
1、 初识HTML HTML:Hyper Text Markup Language(超文本标记语言) 。 超文本包括：文字、图片、音频、视频、动画等。 1.1、W3C标准 1.2、HTML基本结构 示例： <!-- DOCTYPE:告诉浏览器，我们要使用什么规划，这里是HTML --> …...
【头歌实验】课外作业一：开通ECS及使用Linux命令
文章目录一、完成下列实验并截图二、简要回答“课堂考核”内容三、在头歌、华为云或阿里云官网上，找出自己的课外学习资源，制定小组的课程学习计划、专业学习计划。四、习题1.10一、完成下列实验并截图 1、实验《ECS云服务器新手上路》 https://develo…...
CMSIS-RTOS2 RTX5移植到GD32L233
1、CMSIS-RTOS2是什么？ 关于CMSIS-RTOS2的官方描述如下： CMSIS-RTOS v2 （CMSIS-RTOS2） 为基于 Arm Cortex 处理器的设备提供通用 RTOS 接口。它为需要RTOS功能的软件组件提供了一个标准化的API，因此为用户和软件行业带…...
[网络原理] 网络中的基本概念
人生,本就是苦乐参半,这样的生活才是丰富多彩. 文章目录前言1. IP地址2. 端口号3. 协议4. 五元组5. 协议分层6. OSI七层模型7. TCP/IP协议8. 封装和分用9. 客户端与服务端10. 请求与响应前言 本章开始,我们开启网络部分的知识大门. 1. IP地址 1.定义: IP地址主要用于表示网络…...
BeanPostProcessor原理分析
文章目录一、BeanPostProcessor的作用1. 源码2. 使用案例二、Spring生命周期中的BeanPostProcessor三、BeanPostProcessor对PostConstruct的支持四、BeanPostProcessor中的顺序性五、总结一、BeanPostProcessor的作用 BeanPostProcessor提供了初始化前后回调的方法，…...
人工智能和网络安全，应该如何选择？
随着数字时代的到来，网络安全和人工智能成了科技创新产业的重要组成部分。也逐渐成了大多数人心中热门的行业选择。那么该如何抉择呢？ 首先我们来了解下人工智能的发展前景： 如今，人工智能技术无论是在核心技术方面࿰…...
Flink预加载分区维表，实时更新配置信息
当前我们的业务场景，是基于dataStream代码， 维表数据量很大， 实时性要求很高，所以采用预加载分区维表模式， kafka广播流实时更新配置。 实现方案 1：job初始化时 每个分区open 只加载自己那部分的配置&…...
大数据现在找工作难么
大数据行业工作好找还是难找不是光靠嘴说出来的结合实际，看看市场上的招聘需求和岗位要求就大致知道了 要想符合企业用人规范，学历，工作经验，掌握技能都是非常重要的~ 先来看几个招聘网站的报告数据： Boss直聘发布的…...
【Linux】学会这些基本指令来上手Linux吧
前言上篇文章介绍了一些常用的指令，这篇文章再来介绍一下Linux必须学会的指令。一.时间相关的指令ate显示date 指定格式显示时间： date %Y:%m:%d date 用法：date [OPTION]... [FORMAT]1.在显示方面，使用者可以设定欲显示的格式&am…...
【沐风老师】3DMAX交通流插件TrafficFlow使用方法详解
TrafficFlow交通流插件，模拟生成车流、人流动画。 【版本要求】 3dMax 2008及更高版本 【安装方法】 无需安装直接拖动插件脚本文件到3dMax视口中打开。 【快速开始】 1.创建车辆对象和行车路径。 2.打开TrafficFlow插件，先选择“车辆”对象࿰…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
【Go语言基础【12】】指针：声明、取地址、解引用
文章目录 零、概述：指针 vs. 引用（类比其他语言）一、指针基础概念二、指针声明与初始化三、指针操作符1. &：取地址（拿到内存地址）2. *：解引用（拿到值） 四、空指针&am…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...
C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）
名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式，自动确定它们的类型。 这一特性减少了显式类型注解的需要，在保持类型安全的同时简化了代码。通过分析上下文和初始值，TypeSc…...