- 用 Canvas 粒子系统模拟旋风：从零到一的技术实战与思考作者：Eddygit日期：2026-10-20标签：Canvas, 粒子系统, 可视化, 前端, 性能优化 前言旋风（龙卷风）是大自然中最具视觉冲击力的气象现象之一。作为一名前端开发者，我一直在思考：能否用 Web 技术还原这种壮观的动态效果？本文记录了「旋风模拟器」从设计到实现的完整技术路线，以及开发过程中踩过的坑和收获的思考。... 用 Canvas 粒子系统模拟旋风：从零到一的技术实战与思考作者：Eddygit日期：2026-10-20标签：Canvas, 粒子系统, 可视化, 前端, 性能优化 前言旋风（龙卷风）是大自然中最具视觉冲击力的气象现象之一。作为一名前端开发者，我一直在思考：能否用 Web 技术还原这种壮观的动态效果？本文记录了「旋风模拟器」从设计到实现的完整技术路线，以及开发过程中踩过的坑和收获的思考。...
- <h2>前言：一个反直觉的现象</h2><p>同样是「屏幕上有 1000 个元素在动」这件事，用 DOM 写，帧率很容易掉到 20 帧；换成 Canvas 之后，同样 1000 个圆点却能跑满 60 帧。于是很多人得出一个结论：<strong>Canvas 比 DOM 快</strong>。</p><p>这个结论不算错，但它只是结果，不是原因。真正的原因是：Canvas 走的是<strong... <h2>前言：一个反直觉的现象</h2><p>同样是「屏幕上有 1000 个元素在动」这件事，用 DOM 写，帧率很容易掉到 20 帧；换成 Canvas 之后，同样 1000 个圆点却能跑满 60 帧。于是很多人得出一个结论：<strong>Canvas 比 DOM 快</strong>。</p><p>这个结论不算错，但它只是结果，不是原因。真正的原因是：Canvas 走的是<strong...
- 使用离散傅里叶变换把手绘采样转换为周转圆，调节谐波数量观察曲线重建，也可载入心形预设。 使用离散傅里叶变换把手绘采样转换为周转圆，调节谐波数量观察曲线重建，也可载入心形预设。
- 一千二百个粒子在旋涡力场中运动，移动鼠标可施加局部外力，观察速度阻尼与轨迹变化。 一千二百个粒子在旋涡力场中运动，移动鼠标可施加局部外力，观察速度阻尼与轨迹变化。
- 用二维画布呈现黑洞光环、星空与吸积盘的视觉效果，支持尺度调节和鼠标视差，不用于物理计算。 用二维画布呈现黑洞光环、星空与吸积盘的视觉效果，支持尺度调节和鼠标视差，不用于物理计算。
- 使用离散傅里叶变换把手绘采样转换为周转圆，调节谐波数量观察曲线重建，也可载入心形预设。 使用离散傅里叶变换把手绘采样转换为周转圆，调节谐波数量观察曲线重建，也可载入心形预设。
- 用一个纯前端像素打砖块项目，拆解 Canvas 小游戏的模块划分、固定时间步、状态机、碰撞检测、关卡数据与 Web Audio 音效，给不想引入框架的开发者一套可直接复用的组织方式。 用一个纯前端像素打砖块项目，拆解 Canvas 小游戏的模块划分、固定时间步、状态机、碰撞检测、关卡数据与 Web Audio 音效，给不想引入框架的开发者一套可直接复用的组织方式。
- 用 Canvas 值噪声与 fbm 生成可复现的风景页面，再把封面、详情包、仓库和 STS 临时凭证串成一条投稿流水线，附接口契约与踩坑清单。 用 Canvas 值噪声与 fbm 生成可复现的风景页面，再把封面、详情包、仓库和 STS 临时凭证串成一条投稿流水线，附接口契约与踩坑清单。
- 从零开发连连看小游戏：技术路线、心得与优化思考作者：Eddygit日期：2026-10-08项目：连连看 Lianliankan 前言连连看是一款家喻户晓的消除类益智游戏。规则看似简单——找出相同图案的方块对，用不超过2个拐点的折线连接即可消除——但背后涉及的寻路算法、状态管理和用户体验设计却很有讲究。本文分享我用纯 HTML/CSS/JavaScript 从零开发这款小游戏的全过程，包括... 从零开发连连看小游戏：技术路线、心得与优化思考作者：Eddygit日期：2026-10-08项目：连连看 Lianliankan 前言连连看是一款家喻户晓的消除类益智游戏。规则看似简单——找出相同图案的方块对，用不超过2个拐点的折线连接即可消除——但背后涉及的寻路算法、状态管理和用户体验设计却很有讲究。本文分享我用纯 HTML/CSS/JavaScript 从零开发这款小游戏的全过程，包括...
- 🎣 从零开发一个Canvas钓鱼游戏：技术路线、心得与优化思考作者：Eddygit日期：2026-10-05项目：欢乐钓鱼大作战 前言本文记录了「欢乐钓鱼大作战」钓鱼游戏小工具的完整开发过程。这是一个纯前端单文件游戏，使用 HTML5 Canvas + JavaScript 实现，无需任何框架依赖。文章将分享技术路线选择、开发过程中的心得体会、实战经验，以及当前存在的问题和未来优化空间。... 🎣 从零开发一个Canvas钓鱼游戏：技术路线、心得与优化思考作者：Eddygit日期：2026-10-05项目：欢乐钓鱼大作战 前言本文记录了「欢乐钓鱼大作战」钓鱼游戏小工具的完整开发过程。这是一个纯前端单文件游戏，使用 HTML5 Canvas + JavaScript 实现，无需任何框架依赖。文章将分享技术路线选择、开发过程中的心得体会、实战经验，以及当前存在的问题和未来优化空间。...
- H5 Canvas 高分屏绘制与动画摘要：Canvas 可以绘制图表、地图标注和互动动画，但 CSS 尺寸与位图尺寸不同，高分屏上容易模糊。本文介绍设备像素比处理、动画循环、尺寸变化、命中测试和性能控制。 一、区分 CSS 尺寸与位图尺寸Canvas 元素的 CSS 尺寸决定页面布局，width 与 height 属性决定内部位图分辨率。高分屏设备需要更大的位图，再通过变换把绘图坐标维持在... H5 Canvas 高分屏绘制与动画摘要：Canvas 可以绘制图表、地图标注和互动动画，但 CSS 尺寸与位图尺寸不同，高分屏上容易模糊。本文介绍设备像素比处理、动画循环、尺寸变化、命中测试和性能控制。 一、区分 CSS 尺寸与位图尺寸Canvas 元素的 CSS 尺寸决定页面布局，width 与 height 属性决定内部位图分辨率。高分屏设备需要更大的位图，再通过变换把绘图坐标维持在...
- H5 Canvas 高分屏绘制与动画摘要：Canvas 可以绘制图表、地图标注和互动动画，但 CSS 尺寸与位图尺寸不同，高分屏上容易模糊。本文介绍设备像素比处理、动画循环、尺寸变化、命中测试和性能控制。 一、区分 CSS 尺寸与位图尺寸Canvas 元素的 CSS 尺寸决定页面布局，width 与 height 属性决定内部位图分辨率。高分屏设备需要更大的位图，再通过变换把绘图坐标维持在... H5 Canvas 高分屏绘制与动画摘要：Canvas 可以绘制图表、地图标注和互动动画，但 CSS 尺寸与位图尺寸不同，高分屏上容易模糊。本文介绍设备像素比处理、动画循环、尺寸变化、命中测试和性能控制。 一、区分 CSS 尺寸与位图尺寸Canvas 元素的 CSS 尺寸决定页面布局，width 与 height 属性决定内部位图分辨率。高分屏设备需要更大的位图，再通过变换把绘图坐标维持在...
- 想做个在格子上涂色的像素画板，做出来发现两个毛病：线条模糊、画的格子跟鼠标对不上。根源都在 Canvas 的"两套尺寸"上——CSS 尺寸和画布尺寸不是一回事。这篇讲清楚 devicePixelRatio 怎么处理、鼠标坐标怎么换算成格子索引，以及画完怎么导出成图片。 想做个在格子上涂色的像素画板，做出来发现两个毛病：线条模糊、画的格子跟鼠标对不上。根源都在 Canvas 的"两套尺寸"上——CSS 尺寸和画布尺寸不是一回事。这篇讲清楚 devicePixelRatio 怎么处理、鼠标坐标怎么换算成格子索引，以及画完怎么导出成图片。
- 从零构建数学函数自动作图工具 — 技术路线与实战心得作者：Eddygit日期：2026-09-02项目：math-function-grapher 一、为什么做这个工具在学习和教学中，经常需要快速可视化一个数学函数的图像。现有的工具要么太重（GeoGebra、Desmos 需要联网），要么太丑（ Wolfram Alpha 界面复杂），要么不够灵活。于是我想做一个纯前端、零依赖、开箱即用的... 从零构建数学函数自动作图工具 — 技术路线与实战心得作者：Eddygit日期：2026-09-02项目：math-function-grapher 一、为什么做这个工具在学习和教学中，经常需要快速可视化一个数学函数的图像。现有的工具要么太重（GeoGebra、Desmos 需要联网），要么太丑（ Wolfram Alpha 界面复杂），要么不够灵活。于是我想做一个纯前端、零依赖、开箱即用的...
- 从零到一：用纯前端实现监控摄像头安装位置智能标注工具作者：Eddygit | 日期：2026-08-31 | 标签：前端开发, Canvas, 安防, 启发式算法, 华为云DevSpace 前言最近在华为云开发者训练营中，我接到一个有趣的题目：“识别图片自动在上面P一个监控安装合理位置”。说白了，就是用户上传一张房间或场地的照片，工具自动分析并在图片上标注出建议安装监控摄像头的位置。这个需... 从零到一：用纯前端实现监控摄像头安装位置智能标注工具作者：Eddygit | 日期：2026-08-31 | 标签：前端开发, Canvas, 安防, 启发式算法, 华为云DevSpace 前言最近在华为云开发者训练营中，我接到一个有趣的题目：“识别图片自动在上面P一个监控安装合理位置”。说白了，就是用户上传一张房间或场地的照片，工具自动分析并在图片上标注出建议安装监控摄像头的位置。这个需...
上滑加载中
推荐直播
-
华为云码道Agent集成与鸿蒙实战2026/08/11 周二 19:00-21:00
王一男-华为云码道产品规划专家；李炎-华为云码道产品专家；彭江敏-华为云鸿蒙端云一体化开发专家
本次直播带你解读华为云码道7月份产品新特性、新功能。更有专家演示码道Agent Space × 钉钉机器集成实战，从0到1打通消息通道；码道鸿蒙端云一体化实战，快速搭建员工签到系统。
回顾中 -
华为云开发者AI素养直播课·第五期2026/09/04 周五 16:00-18:00
林华鼎-华为云AI开发者运营负责人；蒋春阳-华为云AI开发者案例开发专家
本期直播内容： AI工具体验营 · 第5-8课连讲。Agent-Team 多智能体协作完成毕业设计实践
回顾中 -
华为云开发者AI素养ClassRoom·第六期2026/09/08 周二 19:00-20:00
樊渊-2026华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签