https://blog.zhaoshaomanyu.com/2026-09-12T08:00:00+08:002026-09-12T08:00:00+08:002026-09-12T08:00:00+08:00照烧鳗鱼tag:blog.zhaoshaomanyu.com,2026-09-12:/2026/09/12/canvas-particle-physics-network/

<p>基于原生 HTML5 Canvas 构建的高性能粒子物理网络模拟，支持鼠标引力/排斥交互、连线距离调节与发散脉冲。</p>

<div class="demo-embed-card"> <div class="demo-embed-header"> <span>交互预览 (Interactive Demo)</span> <div class="project-actions"> <a class="btn-anatole" href="https://blog.zhaoshaomanyu.com/demos/interactive-calc/" rel="noopener" target="_blank">全屏体验 ↗</a> <a class="btn-anatole" href="/downloads/interactive-calc.zip" rel="noopener" target="_blank">查看源码 →</a> </div> </div> <div class="demo-iframe-wrapper"> <iframe loading="lazy" sandbox="allow-scripts allow-same-origin" src="https://blog.zhaoshaomanyu.com/demos/interactive-calc/" title="Canvas 粒子引力与动态连线实验"></iframe> </div> </div> <div class="post__content"> <p>这是一个完全使用现代原生 Web 技术（HTML5 Canvas + 纯 JavaScript）构建的轻量级物理仿真交互项目。</p> <h2 id="_1">项目亮点与特性</h2> <ol> <li><strong>零外部框架依赖</strong>：整个演示不引入任何庞大的三方库（无需 Three.js、Pixi.js 等），完全使用浏览器 2D Canvas Context 驱动，加载耗时不到 10 毫秒。</li> <li><strong>物理交互响应</strong>：</li> <li><strong>鼠标排斥/引力</strong>：当鼠标在画布上滑动时，周围半径内的粒子会受到速度冲量并发生偏移；</li> <li><strong>动态网状连线</strong>：实时计算每两个粒子之间的欧几里得距离，在设定的阈值范围内绘制半透明连线，随距离拉远自然淡出；</li> <li><strong>脉冲爆炸效果</strong>：点击顶部控制栏的“发散脉冲”按钮，所有粒子将从中心点向外围施加径向冲击波。</li> <li><strong>独立目录与沙箱隔离</strong>： 该演示的源码保存在 <code>content/demos/interactive-calc/</code> 下，Pelican 配置了 <code>ARTICLE_EXCLUDES</code> 确保其不被篡改为博客文章；通过 <code>iframe</code> 嵌入本页展示，完全不影响外部排版样式。</li> </ol> <h2 id="_2">源码与离线运行包</h2> <ul> <li><strong>全屏独立体验</strong>：<a href="/demos/interactive-calc/">点击此处全屏打开演示</a></li> <li><strong>离线源码下载</strong>：<a href="/downloads/interactive-calc.zip">下载项目完整 Zip 源码包</a></li> </ul> <p>你可以直接解压该 zip 包，在任意电脑上双击其中的 <code>index.html</code> 即可在本地离线运行。</p> </div>