动态投影悬浮按钮需用canvas手动绘制光影：基于鼠标位置计算光源向量，动态调整阴影偏移与强度；通过径向渐变绘制软阴影，结合requestanimationframe实现流畅缩放、光影强化及点击反馈。
用 Canvas 实现带动态投影的悬浮按钮，核心不是“画一个按钮”，而是**实时绘制带光照模拟效果的圆形/矩形元素，并随鼠标位置变化动态调整阴影方向与强度**。Canvas 本身不支持 CSS 的 box-shadow，所以投影必须手动计算并绘制——这反而能做出更真实、可交互的光影效果。
1. 基础结构：Canvas 初始化与按钮定位
先在 HTML 中放一个全屏或固定区域的 <canvas></canvas>，用 JavaScript 获取上下文，并设定按钮的逻辑中心点（比如右下角 60px 偏移）：
- 设置
canvas.width和canvas.height为实际显示尺寸（避免设备像素比导致模糊） - 按钮坐标建议用相对视口计算，例如：
btnX = window.innerWidth - 80，btnY = window.innerHeight - 80 - 用
requestAnimationFrame驱动动画循环，而非setInterval
2. 动态投影原理：用渐变+偏移模拟光源
真正的“动态投影”指阴影随鼠标移动而改变角度和长度。实现方式是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把鼠标位置当作虚拟光源，计算从光源到按钮中心的向量
- 根据该向量方向，确定阴影的偏移量（例如：dx = (mouseX - btnX) * 0.3，dy 同理）
- 用
ctx.shadowColor、shadowBlur和shadowOffsetX/Y绘制基础阴影（适合简单场景） - 进阶做法：不用 shadow API，而是用径向渐变绘制一个半透明椭圆作为“软阴影”，再 translate 到偏移位置——这样可控性更强，边缘更自然
3. 悬浮交互：缩放 + 光影强化 + 点击反馈
“悬浮”不只是 hover，Canvas 中需监听 mousemove 和 click 并更新状态：
- 当鼠标靠近按钮（距离
- 点击时临时缩小再弹回（用 easing 缓动），并叠加一次高亮白光（在按钮顶部画一小片 radialGradient 模拟反光）
- 注意：所有变化都应在 draw() 函数中统一计算，避免多次 save/restore 堆积
4. 性能与细节优化
Canvas 动画容易掉帧，尤其在低端设备上：
- 只重绘变化区域：用
ctx.clearRect()清除上一帧按钮范围（加一点余量），而非全屏清空 - 预生成阴影图形：若投影方向变化不频繁，可将常用角度的阴影缓存为离屏 canvas
- 禁用抗锯齿对圆形按钮影响不大，但可加
ctx.imageSmoothingEnabled = false避免模糊 - 移动端需监听
touchmove，并将touches[0]当作鼠标位置处理
不复杂但容易忽略：投影的真实感不取决于多炫的算法，而在于偏移量与 blur 值是否随距离非线性变化（比如用平方根或三次方缩放），以及阴影颜色是否略带环境色（如暖光下偏棕灰）。做好这几点，Canvas 悬浮按钮的质感就远超纯 CSS 实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
