Canvas粒子实时响应鼠标需持续更新全局mouse对象，初始化为{x:-9999,y:-9999,isDown:false}，绑定mousemove/touchmove事件（passive:false），动画循环中统一读取该对象；吸引/排斥依赖向量运算：dx=mouse.x-p.x, dy=mouse.y-p.y, dist=Math.sqrt(dx²+dy²)，仅当dist
canvas粒子怎么实时响应鼠标位置
关键不是“监听一次”，而是持续更新一个全局 mouse 对象，所有粒子在每帧计算时都读它。常见错误是只在 mousemove 里存坐标，但没处理初始值或触摸事件，导致页面刚加载时粒子乱飞或无响应。
必须做三件事：
– 初始化 mouse = { x: -9999, y: -9999, isDown: false }（用超远坐标避免首帧误吸引）
– 绑定 mousemove 和 touchmove（注意加 { passive: false } 阻止默认滚动）
– 在动画主循环里，不直接用 event.clientX，而是统一读这个对象
粒子被鼠标“吸引”还是“排斥”？物理公式怎么选
本质是向量运算：算出粒子到鼠标的距离和方向，再按规则调整粒子速度。用错公式会导致粒子全部堆在鼠标上不动，或疯狂甩出画布外。
推荐用带衰减的力模型：
– 先算向量差：dx = mouse.x - particle.x，dy = mouse.y - particle.y
– 算距离：dist = Math.sqrt(dx * dx + dy * dy)
– 设安全距离（比如 radius = 100），只在 dist 时生效
– 力大小用反比衰减：force = (radius - dist) / radius（越近力越强，到鼠标位置力为 0）
– 最后叠加到速度：particle.vx += dx * force * 0.05，particle.vy += dy * force * 0.05
注意：系数 0.05 很关键，太大粒子抖动，太小无感；别用纯除法（如 1/dist），容易在 dist === 0 时爆炸
点击散开效果为什么粒子飞得慢或飞不出去
问题通常出在“初始爆发力”和“阻尼衰减”的配合上。很多人只设了随机速度，但没加方向约束，导致大量粒子朝画布边缘外飞，瞬间消失。
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
正确做法：
– 点击时遍历附近粒子（用距离判断，别用矩形框）
– 每个粒子生成一个单位向量指向鼠标反方向：angle = Math.atan2(particle.y - mouse.y, particle.x - mouse.x)
– 再乘以随机速度幅值（比如 Math.random() * 8 + 4）
– 同时给速度加阻尼：particle.vx *= 0.98，particle.vy *= 0.98（放在每帧 update 里）
– 别忘了重置粒子的 opacity 或加淡出逻辑，否则旧粒子叠在新粒子上显脏
性能掉帧严重？canvas粒子数量和渲染策略怎么平衡
100 个粒子卡顿，大概率不是粒子多，而是每帧做了太多重复计算或 DOM 操作。Canvas 本身不慢，慢的是你写的 JS。
几个硬核优化点：
– 把 ctx.clearRect() 换成 ctx.fillStyle = '#000'; ctx.fillRect(0, 0, width, height)（对深色背景更快）
– 所有粒子共用一个 requestAnimationFrame 主循环，别每个粒子自己 requestAnimationFrame
– 距离计算用 dx*dx + dy*dy 代替 Math.sqrt（比较时完全不需要开方）
– 粒子连线只画在距离 的粒子对之间，且用 ctx.beginPath() + 单次 stroke() 批量绘制，别每个线都 beginPath
– 移动端务必加 devicePixelRatio 适配，否则高清屏下粒子糊成一片
真正卡顿的临界点一般在 500+ 粒子，这时该考虑 Web Worker 搬运物理计算，或者用 OffscreenCanvas 分离渲染线程——但 90% 的项目，把上面四条做到位，300 粒子稳 60fps
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
