在 Canvas 中发射烟花：通过点击和粒子数改变动态的 JavaScript 入门

关于本文
本文是通过利用生成式 AI 的自动生成流程创建的。
我们查阅了 Canvas API 和 requestAnimationFrame 的官方文档，并准备了可以通过点击操作虚拟烟花的教程。不使用声音、位置信息和个人信息。

验证状态：🧪 JavaScript 语法已确认，浏览器实际显示未确认
2026年10月31日，在 V8 中对保存的 JavaScript 进行了语法确认。尚未实际测试在 GitHub Pages 上的发布、绘制与点击操作以及各终端的实际表现。

首先尝试：在夜空中发射烟花吧

🔷 试一试
🎆 打开 Canvas 烟花实时演示（尚未确认公开上线及浏览器运行情况）
📘 源代码与详细 README

只需三个操作。
1. 点击“发射烟花”，或在夜空的任意位置点击。
2. 将“粒子数”从 24 个更改为 48 个，然后再次点击。
3. 尝试“暂停”、“恢复”和“清除”。

当烟花散开时，下方的状态栏会显示发射次数和粒子数，例如“烟花第 1 次・粒子数 24 个”。改变粒子数后，点的数量应该会随之改变。这是根据代码预测的结果，并非在真实浏览器中确认的结果。

🟦 即使肉眼看不见也能进行确认
除了绘制之外，还会在状态栏显示次数和粒子数量。如果启用了减少动态效果的操作系统设置，烟花将以静止状态显示。

为什么点会散开

Canvas 是 HTML 中准备的绘图区域。以点击位置为中心，配置角度略有不同的点。每个点都有水平速度 vx 和垂直速度 vy，其坐标会在下一帧发生变化。

flowchart LR
    A["クリック・ボタン"] --> B["粒子を生成"]
    B --> C["座標を更新"]
    C --> D["Canvasに描画"]
    D --> E["状態を文字で表示"]

最重要的代码是这四行

p.x += p.vx;
p.y += p.vy;
p.vy += 0.045; // 下向きに曲がる変化（教材用）
p.life = Math.max(0, p.life - 0.012);

p.x 和 p.y 是粒子的位置。vx 和 vy 是每一帧的移动量，life 用于透明度。上面四行是原理的摘录，并不是可以独立运行的完整代码。

利用浏览器通知绘制时机的 requestAnimationFrame()，仅在粒子残留期间预约下一次绘制。停止时用 cancelAnimationFrame() 取消预约。

更改一处并对比预测

🧪 实验：改变下落速度
打开 Daily Code 的 JavaScript 主体，并尝试将 p.vy += 0.045 修改为 p.vy += 0.09。可以预测，向下弯曲的速度将会增加。

恢复到原来的 0.045 即可进行比较。这不是现实中的重力加速度单位。

在自己的电脑上运行

如果无法打开实时演示，请将固定提交的 HTML 和 JavaScript 保存到同一个文件夹中。

在浏览器中打开 HTML，或根据需要该文件夹中启动 python3 -m http.server 8000 --bind 127.0.0.1 ，然后打开同一台电脑上的 http://127.0.0.1:8000/ 。在终端中按 Ctrl+C 即可退出。无需管理员权限、API 密钥或额外的库。

遇到问题时

⚠️ 安全与无障碍
不使用声音或高速闪烁，并提供停止按钮。如果操作系统的 prefers-reduced-motion 功能已启用，则显示静态图像。不将重要信息仅局限于 Canvas 中，同时通过文字标示状态。尚未针对各个终端进行无障碍验证。

如果用于工作

可应用于培训达成效果或活动指南等小型 UI，直观展示操作结果。但是，在业务中请勿仅通过动画传达重要的数值或警告。Canvas 仅负责绘制，并不提供数据保存、身份验证和访问控制。

与其他方法对比

从屏幕运动中独立阅读烟花计算过程

Canvas 的烟花并不是在移动一张图片。它通过以短时间间隔清除前一帧画面、并重新绘制粒子新的位置和颜色来呈现运动效果。如果粒子没有从点击位置扩散，请依次单独排查：首先检查是否接收到了按钮或点击事件，其次检查是否执行了生成粒子的处理，最后检查是否绘制到了 Canvas 上。状态栏中显示了次数或粒子数量，并不意味着绘制一定成功。初学者如果将“数据更新”与“屏幕上的可见变化”分开考虑，将更容易发现错误。

在从点击位置向四周放射扩散的表现中，我们需要通过改变角度来确定水平和垂直方向的速度。如果在中央放烟花，点会向上下左右扩散；但如果在屏幕边缘放，部分点就会跑到屏幕外面去。点看起来变少可能并不是因为生成失败，而是超出了显示范围。如果粒子数的显示和实际肉眼能追踪的粒子数不一致，请先将点击位置固定在中央重新运行。在相同的操作条件下进行比较，有助于排查原因。

文章中的摘要代码是一个将速度加到位置上的简单计算。水平速度和垂直速度相互独立，如果加上向下的变化，粒子的轨迹最终会向下弯曲。教学用的0.045这个数值并不是现实中的重力加速度。将其修改为0.09时，向下的速度应该会增加，但这并不能保证所有的点都会落在同一个地方。发射位置、初始速度和寿命如果不同，可见范围也会发生变化。在进行比较时，请将要修改的数值限定为一个。

在按帧推进位置的计算中，屏幕的刷新次数有时会影响动作的速度。requestAnimationFrame是浏览器通知下一次绘制时机的API，并不能保证以固定的秒数调用。当在高刷新率屏幕和负载高的终端上看到的效果不同时，不仅需要检查浏览器的行为，还需要检查程序如何处理经过的时间。本教程采用的是简化的表现形式，因此如果是在需要复现实际时间的业务动画中，请同时考虑基于时间差的移动方式。

粒子的寿命表示点消失前的变化过程。如果降低透明度，即使坐标还在屏幕内，粒子也会变淡。当粒子看不见时，明确它是寿命耗尽了还是跑到了屏幕外面，将有助于加深理解。如果在连续发射时旧粒子一直留在数组中，看不到的点也会成为更新的对象，从而增加终端的负载。建议检查清除按钮或粒子寿命管理的逻辑，并交替比较粒子数较少和较多的条件。

如何清除Canvas的背景也会改变轨迹给人的印象。完全擦除旧画面的方法可以让人清楚地看到粒子的当前位置。用浅色重叠涂抹背景的方法虽然能表现出残影的效果，但有时颜色会变混浊。这里想要研究的不是粒子的移动量，而是绘制的机制。修改外观时，请确认到底是位置更新的计算发生了变化，还是仅仅改变了屏幕的涂抹方式。如果同时改变这两者，就会分不清到底是哪个处理引发的问题。

显示在屏幕上的Canvas宽度与内部绘制像素的宽度不一定相同。如果为了智能手机缩小了显示尺寸，就需要将点击的坐标换算为Canvas内部的坐标。例如，如果显示宽度是内部宽度的一半，那么将显示上距离左端100像素的位置当作内部的100像素来处理是行不通的。当烟花在屏幕边缘看起来发生偏移时，请在修改速度公式之前检查点击坐标的转换。在高分辨率屏幕上粒子看起来比较粗糙时，内部绘制尺寸有时也会产生影响。

比较实验时的记录方法

第一个实验是用24个粒子放一次烟花，然后从相同位置用48个粒子放一次。预期的不同在于点的密度，单个粒子的速度并不一定会改变。即便因为增加数量而觉得动作变慢了，也要区分这究竟是终端负载导致的，还是粒子的移动公式发生了变化。同时观察状态栏的次数、粒子数、清除按钮的反应以及可见粒子的扩散方式，可以使比较更加具体。请不要认为只要一直增加点的数量就行，务必同时确认可读性和流畅度。

接下来的实验是将粒子数恢复为24，仅将向下的变化从0.045修改为0.09。如果速度和发射位置与上次相同，可以预测轨迹会更快地向下弯曲。但是，如果操作前的粒子仍留在屏幕上，就会分不清这些点属于哪种条件。在比较前清除画面并恢复到初始状态，将更有利于进行思考。请确认当数值恢复原样时，外观是否也接近原样。如果不同，请检查是否加载了缓存或旧文件。

如果减少动作的设置有效，将烟花设计为静止显示是一种正常的无障碍适配。切勿仅凭它不动就判断为故障。即使看不见点的动作，通过状态栏的文字将次数和粒子数传达出去也是很重要的。目前在现阶段的实机测试中，尚未确认屏幕朗读和键盘操作是否能正确传达状态。如果要引入面向业务的界面，请确保视觉效果不是传达操作结果的唯一手段。

烟花可以应用於活动通知或学习教材的完成演出，但重要的操作结果也必须通过文字传达。如果在错误画面上加入过于华丽的演出，可能会导致解决方法说明变得难以阅读。请意识到点多并不意味着一定好，将简短的演出与易懂的状态显示结合起来才是合适的做法。Canvas负责的是绘制，而不是数据保存或访问权限的管理。分清这一点，就能安全地应用视觉效果。

GitHub示例

📘 完整版与复用方法
Daily-Code-Samples：Canvas烟花教材
实时演示（公开运行情况未经确认）

README中总结了操作、代码机制、一处修改以及失败时的确认方法。文章是最小示例，GitHub是完整版，这就是两者的分工。

官方资料与确认日期

• MDN：Canvas API

• MDN：requestAnimationFrame

• MDN：prefers-reduced-motion

官方资料确认日期：2026年10月31日（日本标准时间）。实际浏览器渲染成功与否以及GitHub Pages是否成功发布尚未确认。