HTML流光爱心
文章目录
序号 | 目录 |
1 | HTML满屏跳动的爱心(可写字) |
2 | HTML五彩缤纷的爱心 |
3 | HTML满屏漂浮爱心 |
4 | HTML情人节快乐 |
5 | HTML蓝色爱心射线 |
6 | HTML跳动的爱心(简易版) |
7 | HTML粒子爱心 |
8 | HTML蓝色动态爱心 |
9 | HTML跳动的爱心(双心版) |
10 | HTML橙色动态粒子爱心 |
11 | HTML旋转爱心 |
12 | HTML爱情树 |
13 | HTML3D相册 |
14 | HTML旋转相册 |
15 | HTML基础烟花秀 |
16 | HTML炫酷烟花秀 |
17 | HTML粉色烟花秀 |
18 | HTML新春烟花 |
19 | HTML龙年大吉 |
20 | HTML圣诞树 |
21 | HTML大雪纷飞 |
22 | HTML想见你 |
23 | HTML元素周期表 |
24 | HTML飞舞的花瓣 |
25 | HTML星空特效 |
26 | HTML黑客帝国字母雨 |
27 | HTML哆啦A梦 |
28 | HTML流星雨 |
29 | HTML沙漏爱心 |
30 | HTML爱心字母雨 |
31 | HTML爱心流星雨 |
32 | HTML生日蛋糕 |
33 | HTML流光爱心 |
写在前面
本期博主给大家推荐一个由HTML代码实现的、红蓝色线条组成的流光爱心,一起来看看吧。
完整代码
<!DOCTYPE html>
<!--<div class="menu__subheader"><br>微信公众号:雁卿雁卿呀-->
<html lang="en"><head><meta charset="UTF-8" /><title>流光爱心</title><meta name="author" content="Logical Digit"></head><!-- css部分 --><style>body {background-color: #000;margin: 0;overflow: hidden;background-repeat: no-repeat;
}
</style><body><!-- 绘画爱心 --><canvas id="canvas" width="1400" height="600"></canvas><!-- js部分 --></body><script>
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Initialize the GL context
var gl = canvas.getContext('webgl');
if (!gl) {console.error("Unable to initialize WebGL.");
}
//Time step
var dt = 0.015;
//Time
var time = 0.0;
//************** Shader sources **************
var vertexSource = `
attribute vec2 position;
void main() {gl_Position = vec4(position, 0.0, 1.0);
}
`;var fragmentSource = `
precision highp float;
uniform float width;
uniform float height;
vec2 resolution = vec2(width, height);
uniform float time;
#define POINT_COUNT 8
vec2 points[POINT_COUNT];
const float speed = -0.5;
const float len = 0.25;
float intensity = 0.9;
float radius = 0.015;
//https://www.shadertoy.com/view/MlKcDD
//Signed distance to a quadratic bezier
float sdBezier(vec2 pos, vec2 A, vec2 B, vec2 C){ vec2 a = B - A;vec2 b = A - 2.0*B + C;vec2 c = a * 2.0;vec2 d = A - pos;float kk = 1.0 / dot(b,b);float kx = kk * dot(a,b);float ky = kk * (2.0*dot(a,a)+dot(d,b)) / 3.0;float kz = kk * dot(d,a); float res = 0.0;float p = ky - kx*kx;float p3 = p*p*p;float q = kx*(2.0*kx*kx - 3.0*ky) + kz;float h = q*q + 4.0*p3;if(h >= 0.0){ h = sqrt(h);vec2 x = (vec2(h, -h) - q) / 2.0;vec2 uv = sign(x)*pow(abs(x), vec2(1.0/3.0));float t = uv.x + uv.y - kx;t = clamp( t, 0.0, 1.0 );// 1 rootvec2 qos = d + (c + b*t)*t;res = length(qos);}else{float z = sqrt(-p);float v = acos( q/(p*z*2.0) ) / 3.0;float m = cos(v);float n = sin(v)*1.732050808;vec3 t = vec3(m + m, -n - m, n - m) * z - kx;t = clamp( t, 0.0, 1.0 );// 3 rootsvec2 qos = d + (c + b*t.x)*t.x;float dis = dot(qos,qos);res = dis;qos = d + (c + b*t.y)*t.y;dis = dot(qos,qos);res = min(res,dis);qos = d + (c + b*t.z)*t.z;dis = dot(qos,qos);res = min(res,dis);res = sqrt( res );}return res;
}
//http://mathworld.wolfram.com/HeartCurve.html
vec2 getHeartPosition(float t){return vec2(16.0 * sin(t) * sin(t) * sin(t),-(13.0 * cos(t) - 5.0 * cos(2.0*t)- 2.0 * cos(3.0*t) - cos(4.0*t)));
}
//https://www.shadertoy.com/view/3s3GDn
float getGlow(float dist, float radius, float intensity){return pow(radius/dist, intensity);
}
float getSegment(float t, vec2 pos, float offset, float scale){for(int i = 0; i < POINT_COUNT; i++){points[i] = getHeartPosition(offset + float(i)*len + fract(speed * t) * 6.28);}vec2 c = (points[0] + points[1]) / 2.0;vec2 c_prev;float dist = 10000.0;for(int i = 0; i < POINT_COUNT-1; i++){//https://tinyurl.com/y2htbwkmc_prev = c;c = (points[i] + points[i+1]) / 2.0;dist = min(dist, sdBezier(pos, scale * c_prev, scale * points[i], scale * c));}return max(0.0, dist);
}
void main(){vec2 uv = gl_FragCoord.xy/resolution.xy;float widthHeightRatio = resolution.x/resolution.y;vec2 centre = vec2(0.5, 0.5);vec2 pos = centre - uv;pos.y /= widthHeightRatio;//Shift upwards to centre heartpos.y += 0.02;float scale = 0.000015 * height;float t = time;//Get first segmentfloat dist = getSegment(t, pos, 0.0, scale);float glow = getGlow(dist, radius, intensity);vec3 col = vec3(0.0);//White corecol += 10.0*vec3(smoothstep(0.003, 0.001, dist));//Pink glowcol += glow * vec3(0.94,0.14,0.4);//Get second segmentdist = getSegment(t, pos, 3.4, scale);glow = getGlow(dist, radius, intensity);//White corecol += 10.0*vec3(smoothstep(0.003, 0.001, dist));//Blue glowcol += glow * vec3(0.2,0.6,1.0);//Tone mappingcol = 1.0 - exp(-col);//Output to screengl_FragColor = vec4(col,1.0);
}
`;//************** Utility functions **************window.addEventListener('resize', onWindowResize, false);function onWindowResize() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;gl.viewport(0, 0, canvas.width, canvas.height);gl.uniform1f(widthHandle, window.innerWidth);gl.uniform1f(heightHandle, window.innerHeight);
}//Compile shader and combine with source
function compileShader(shaderSource, shaderType) {var shader = gl.createShader(shaderType);gl.shaderSource(shader, shaderSource);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);}return shader;
}//From https://codepen.io/jlfwong/pen/GqmroZ
//Utility to complain loudly if we fail to find the attribute/uniform
function getAttribLocation(program, name) {var attributeLocation = gl.getAttribLocation(program, name);if (attributeLocation === -1) {throw 'Cannot find attribute ' + name + '.';}return attributeLocation;
}function getUniformLocation(program, name) {var attributeLocation = gl.getUniformLocation(program, name);if (attributeLocation === -1) {throw 'Cannot find uniform ' + name + '.';}return attributeLocation;
}//************** Create shaders **************//Create vertex and fragment shaders
var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);//Create shader programs
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);gl.useProgram(program);//Set up rectangle covering entire canvas
var vertexData = new Float32Array([-1.0, 1.0, // top left-1.0, -1.0, // bottom left1.0, 1.0, // top right1.0, -1.0, // bottom right
]);//Create vertex buffer
var vertexDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);// Layout of our data in the vertex buffer
var positionHandle = getAttribLocation(program, 'position');gl.enableVertexAttribArray(positionHandle);
gl.vertexAttribPointer(positionHandle,2, // position is a vec2 (2 values per component)gl.FLOAT, // each component is a floatfalse, // don't normalize values2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes)0 // how many bytes inside the buffer to start from
);//Set uniform handle
var timeHandle = getUniformLocation(program, 'time');
var widthHandle = getUniformLocation(program, 'width');
var heightHandle = getUniformLocation(program, 'height');gl.uniform1f(widthHandle, window.innerWidth);
gl.uniform1f(heightHandle, window.innerHeight);function draw() {//Update timetime += dt;//Send uniforms to programgl.uniform1f(timeHandle, time);//Draw a triangle strip connecting vertices 0-4gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);requestAnimationFrame(draw);
}draw();
</script>
</html>
代码分析
这段代码通过HTML、CSS和WebGL结合实现了一个“流光爱心”效果,以下是对其的详细分析。
1. HTML结构
在HTML部分,主要是一个canvas
元素,它是用于绘制心形动画的区域。canvas
元素通过其ID属性canvas
在JavaScript中被引用,用于初始化WebGL上下文。
<canvas id="canvas" width="1400" height="600"></canvas>
在这里,宽度和高度只是初始设置,代码通过JavaScript调整canvas
的大小以适应浏览器窗口。
2. CSS部分
CSS的作用是设置整个网页的背景颜色为黑色,并使画布占据整个窗口,同时禁用滚动条以确保效果全屏展示。
body {background-color: #000;margin: 0;overflow: hidden;background-repeat: no-repeat;
}
3. WebGL上下文初始化
JavaScript部分通过getContext('webgl')
获取WebGL绘图上下文,这是一种用于在网页中绘制2D和3D图形的API。
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext('webgl');
if (!gl) {console.error("Unable to initialize WebGL.");
}
这段代码确保WebGL能够正常运行,如果无法初始化WebGL,会在控制台输出错误信息。
4. 着色器程序
代码中定义了顶点着色器和片段着色器,用于处理图形的顶点和颜色计算。顶点着色器vertexSource
负责定义绘制区域,而片段着色器fragmentSource
则负责生成心形动画的光效。
-
顶点着色器:这个简单的顶点着色器只定义了矩形区域,覆盖整个
canvas
。
attribute vec2 position;
void main() {gl_Position = vec4(position, 0.0, 1.0);
}
-
片段着色器:这是核心部分,计算并绘制了心形的流光效果。着色器使用了多种图形技术,如二次贝塞尔曲线距离函数来生成心形轮廓,
getGlow
函数实现光晕效果,getHeartPosition
函数计算心形轨迹。
vec2 getHeartPosition(float t){return vec2(16.0 * sin(t) * sin(t) * sin(t),-(13.0 * cos(t) - 5.0 * cos(2.0*t)- 2.0 * cos(3.0*t) - cos(4.0*t)));
}
这个公式是数学中的经典“心形曲线公式”,通过调整时间参数t
,可以得到心形轨迹上的点。
5. 动态渲染
在draw
函数中,程序使用requestAnimationFrame(draw)
不断调用自己来实现帧动画,逐帧更新time
变量,使得心形的流光效果随着时间变化而持续运行。
function draw() {time += dt;gl.uniform1f(timeHandle, time);gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);requestAnimationFrame(draw);
}
每一帧,WebGL都会根据当前的时间time
重新计算心形上每个点的位置,进而生成流光效果。
6. 响应窗口变化
代码监听了窗口大小的变化,使用onWindowResize
函数动态调整画布的大小,确保动画始终适应窗口尺寸,并且心形保持居中显示。
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;gl.viewport(0, 0, canvas.width, canvas.height);gl.uniform1f(widthHandle, window.innerWidth);gl.uniform1f(heightHandle, window.innerHeight);
}
总结
这段代码通过WebGL技术生成了一个心形流光效果。核心部分在于数学公式计算出的心形轨迹和光晕效果,通过着色器来实现。WebGL的强大之处在于它能直接操控GPU,生成高效的动画效果。
写在后面
我是一只有趣的兔子,感谢你的喜欢!
相关文章:
HTML流光爱心
文章目录 序号目录1HTML满屏跳动的爱心(可写字)2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐5HTML蓝色爱心射线6HTML跳动的爱心(简易版)7HTML粒子爱心8HTML蓝色动态爱心9HTML跳动的爱心(双心版)1…...
java技能
日志实际使用 log.error(“111”,e);和 System.out.println(ExceptionUtils.getStackTrace(error)); 日志查询 tail -f root.log 前端页面命名: mounted(){ document.title‘设备可视页面’ } 查看ips所属mac nbtstat -a 10.87.236.60 获取容器名称 hostName In…...
本省第一所!新大学,揭牌!
9月26日,海南艺术职业学院举行揭牌仪式,标志着海南省第一所公办艺术类高等职业院校正式揭牌成立。海南省旅文厅党组成员、副厅长刘成出席揭牌仪式,省教育厅党组成员、副厅长邢孔政在揭牌仪式上宣读省人民政府同意设立海南艺术职业学院的批复。…...
企业微信(企微)审批与影刀RPA结合
企业微信审批与影刀RPA结合 效果先看视频: 影刀与企业微信审批结合 具体步骤: 1、登录企微管理后台,新建一个审批流。 添加模板→自定义模板,根据需求添加审批节点。 添加完之后,回到审批界面,可以看…...
新手教学系列——用 VSCode 实现高效远程开发
随着软件开发环境日益复杂,远程开发已成为许多开发者的日常工作方式。尤其当项目需要直接在服务器上运行或本地计算资源有限时,能够使用一款便捷、强大的工具至关重要。在众多 IDE 中,VSCode 因其轻量、灵活且支持丰富插件,成为远程开发的理想选择。本文将详细介绍如何通过…...
[uni-app]小兔鲜-04推荐+分类+详情
热门推荐 新建热门推荐组件, 动态设置组件的标题 <template><!-- 推荐专区 --><view class"panel hot"><view class"item" v-for"item in list" :key"item.id">... ...<navigator hover-class"none&…...
PHP人才机遇桥梁招聘求职全能系统小程序源码
人才机遇桥梁 —— 招聘求职全能系统全解析 💼🚀 🌉 搭建人才与机遇的桥梁 在这个竞争激烈的职场环境中,找到一份心仪的工作或招募到合适的人才,往往不是一件容易的事。但幸运的是,我们有了“人才机遇桥梁…...
计算机毕业设计Hadoop+Spark抖音可视化 抖音舆情监测 预测算法 抖音爬虫 抖音大数据 情感分析 NLP 自然语言处理 Hive 机器学习 深度学习
Python抖音可视化开题报告 一、研究背景与意义 随着移动互联网的迅猛发展,短视频平台如抖音已成为人们日常生活中不可或缺的一部分。抖音以其独特的算法和内容推荐机制,吸引了数以亿计的用户。然而,随着用户规模的不断扩大,如何…...
Linux 学习 awk 和sed 命令使用
awk 命令 awk 是一种处理文本文件的语言,是一个强大的文本分析工具。 awk 通过提供编程语言的功能,如变量、数学运算、字符串处理等,使得对文本文件的分析和操作变得非常灵活和高效。 之所以叫 awk 是因为其取了三位创始人 Alfred Aho&#x…...
双端搭建个人博客
1. 准备工作 确保你的两个虚拟机都安装了以下软件: 虚拟机1(Web服务器): Apache2, PHP虚拟机2(数据库服务器): MariaDB2. 安装步骤 虚拟机1(Web服务器) 安装Apache2和PHP 更新系统包列表: sudo apt update安装Apache2: sudo apt install apache2 -y安装PHP及其Apac…...
PHP 面向对象编程
PHP 面向对象编程 PHP 是一种流行的服务器端脚本语言,广泛用于 web 开发。它支持多种编程范式,包括面向对象编程(OOP)。面向对象编程是一种编程风格,它使用“对象”来设计软件,其中对象是数据和行为的集合…...
应急响应(1)-同事电脑
一、现象 重要时间节点,同事反馈桌面有鼠标移动、随机断网;发现登录账户多了一个,由于电脑长时间没有更改过密码,导致忘记密码无法登录。随机联系进行应急处理。 二、排查 2.1、密码重置/删除 由于同事忘记密码导致无法进行登录…...
class 023 随机快速排序
这篇文章是看了“左程云”老师在b站上的讲解之后写的, 自己感觉已经能理解了, 所以就将整个过程写下来了。 这个是“左程云”老师个人空间的b站的链接, 数据结构与算法讲的很好很好, 希望大家可以多多支持左程云老师, 真心推荐. https://space.bilibili.com/8888480?spm_id_f…...
如何理解矩阵的复数特征值和特征向量?
实数特征值的直观含义非常好理解,它就是在对应的特征向量方向上的纯拉伸/压缩。 而复数特征值,我们可以把它放在复数域中理解。但是这里给出一个不那么简洁、但是更加直观的理解方式:把它放在实空间中。那么复数特征值表现的就是旋转等比放大…...
怎么查看网站是否被谷歌收录,查看网站是否被搜索引擎收录5个方法与步骤
要查看网站是否被谷歌(Google)或其他搜索引擎收录,是网站管理和SEO(搜索引擎优化)中的一个重要环节。以下是查看网站是否被搜索引擎收录5个方法与步骤,帮助您确认网站是否被搜索引擎成功索引: …...
Java工具--stream流
Java工具--stream流 过滤(filter)统计求最大最小和均值求和(sum)过滤后,对数据进行统计 遍历(map)规约(reduce)排序(sorted)去重(dist…...
什么是 JWT?它是如何工作的?
松哥最近辅导了几个小伙伴秋招,有小伙伴在面小红书时遇到这个问题,这个问题想回答全面还是有些挑战,松哥结合之前的一篇旧文和大伙一起来聊聊。 一 无状态登录 1.1 什么是有状态 有状态服务,即服务端需要记录每次会话的客户端信…...
微信小程序使用picker,数组怎么设置默认值
默认先显示请选择XXX。然后点击弹出选择列表。如果默认value是0的话,他就直接默认显示数组的第一个了。<picker mode"selector" :value"planIndex" :range"planStatus" range-key"label" change"bindPlanChange&qu…...
Springboot生成树工具类,可通过 id/code 编码生成 2.0版本
优化工具类中,查询父级时便利多次的问题 import org.apache.commons.collections4.CollectionUtils; import org.apache.commons.lang3.mutable.MutableLong; import org.springframework.lang.NonNull; import org.springframework.lang.Nullable; import org.spri…...
17、CPU缓存架构详解高性能内存队列Disruptor实战
1.CPU缓存架构详解 1.1 CPU高速缓存概念 CPU缓存即高速缓冲存储器,是位于CPU与主内存间的一种容量较小但速度很高的存储器。CPU高速缓存可以分为一级缓存,二级缓存,部分高端CPU还具有三级缓存,每一级缓存中所储存的全部数据都是…...
算法训练营打卡Day18
目录 二叉搜索树的最小绝对差二叉搜索树中的众数二叉树的最近公共祖先额外练手题目 题目1、二叉搜索树的最小绝对差 力扣题目链接(opens new window) 给你一棵所有节点为非负值的二叉搜索树,请你计算树中任意两节点的差的绝对值的最小值。 示例: 思…...
【leetcode】169.多数元素
boyer-moore算法最简单理解方法: 假设你在投票选人 如果你和候选人(利益)相同,你就会给他投一票(count1),如果不同,你就会踩他一下(count-1)当候选人票数为0&…...
MyBatis<foreach>标签的用法与实践
foreach标签简介 实践 demo1 简单的一个批量更新,这里传入了一个List类型的集合作为参数,拼接到 in 的后面 ,来实现一个简单的批量更新 <update id"updateVislxble" parameterType"java.util.List">update model…...
R语言Shiny包新手教程
R语言Shiny包新手教程 1. 简介 Shiny 是一个 R 包,用于创建交互式网页应用。它非常适合展示数据分析结果和可视化效果。 2. 环境准备 安装R和RStudio 确保你的计算机上安装了 R 和 RStudio。你可以从 CRAN 下载 R,或从 RStudio 官网 下载 RStudio。…...
[大象快讯]:PostgreSQL 17 重磅发布!
家人们,数据库界的大新闻来了!📣 PostgreSQL 17 正式发布,全球开发者社区的心血结晶,带来了一系列令人兴奋的新特性和性能提升。 发版通告全文如下 PostgreSQL 全球开发小组今天(2024-09-26)宣布…...
CHI trans--Home节点发起的操作
总目录: CHI协议简读汇总-CSDN博客https://blog.csdn.net/zhangshangjie1/article/details/131877216 Home节点能够发起的操作,包含如下几类: Home to Subordinate Read transactionsHome to Subordinate Write transactionsHome to Subor…...
Rust和Go谁会更胜一筹
在国内,我认为Go语言会成为未来的主流,因为国内程序员号称码农,比较适合搬砖,而Rust对心智要求太高了,不适合搬砖。 就个人经验来看,Go语言简单,下限低,没有什么心智成本,…...
记HttpURLConnection下载图片
目录 一、示例代码1 二、示例代码2 一、示例代码1 import java.io.*; import java.net.HttpURLConnection; import java.net.URL;public class Test {/*** 下载图片*/public void getNetImg() {InputStream inStream null;FileOutputStream fOutStream null;try {// URL 统…...
物联网实训室建设的必要性
物联网实训室建设的必要性 一、物联网发展的背景 物联网(IoT)是指通过信息传感设备,按照约定的协议,将任何物品与互联网连接起来,进行信息交换和通信,以实现智能化识别、定位、跟踪、监控和管理的一种网络…...
初识C语言(四)
目录 前言 十一、常见关键字(补充) (1)register —寄存器 (2)typedef类型重命名 (3)static静态的 1、修饰局部变量 2、修饰全局变量 3、修饰函数 十二、#define定义常量和宏…...
有哪些做婚礼电子请柬的网站/现在百度怎么优化排名
主备同步的实现原理 我们先来了解一下主备同步的原理,下面以一个update语句来介绍主库与备库间是如何进行同步的。 上图是一个update语句在节点A执行,然后同步到节点B的完整流程图,具体步骤有: 主库接受到客户端发送的一条updat…...
做标书经验分享网站/网站推广哪个好
不管是农场内亦或是rts,我很难总结出游戏的乐趣究竟在哪里 也许最近看到了一些端倪 玩家乐于创造出一些东西,比如看着星露谷物语的树一棵棵菜被种植,监狱建筑师里被建筑的房间,rts里被生产出来的部队 玩家乐于建筑出有序的东西 毁…...
商丘网站/深圳seo网络推广
蓝桥杯 --- 二分与前缀和(习题)730. 机器人跳跃问题1221. 四平方和1227. 分巧克力99. 激光炸弹1230. K倍区间730. 机器人跳跃问题 机器人正在玩一个古老的基于 DOS 的游戏。 游戏中有 N1 座建筑——从 0 到 N 编号,从左到右排列。 编号为 …...
家装设计师怎么学/文章优化关键词排名
Matlab强大的函数库涉及各个领域 matlab各个领域的函数库:https://ww2.mathworks.cn/matlabcentral/fileexchange/ 发现向量arrayA中最小的Num个数 function [ minFlags ] findMinFlag( arrayA,num ) %FINDMINFLAG Summary of this function goes here % Deta…...
网站建设与设计教程视频/软文发稿系统
缘起 书说前两篇文章《 十五 ║ Vue前篇:JS对象&字面量&this》和 《 十六 ║ Vue前篇:ES6初体验 & 模块化编程》,已经通过对js面向对象,类和模式封装,ES6新特性等多个角度讲解了Vue入门的一些储备知识&…...
python 做网站 套件/热点事件营销案例
Java应用程序运行时升级软件,无需重新启动的方式有两种,热部署和热加载。 热加载 热加载即在在运行时重新加载class,实现原理主要依赖java的类加载机制,是在运行时通过重新加载改变类信息,直接改变程序行为。在实现方…...