Canvas 画布
Canvas
中级网页小程序Canvas 是网页里的一块画布，用 JavaScript 往上面一笔笔画图形、文字和图片。它擅长一次画成千上万个东西，比如粒子特效、图表、小游戏、图片编辑；代价是画上去的只是像素，浏览器不知道「这里有个按钮」，点击、无障碍都得自己处理。
你可能会说：「我想做一个满屏粒子、鼠标划过会散开的背景效果，用一堆 div 会不会太卡？」
读之前建议先了解
动手看看三千个粒子躲着鼠标
要点Canvas 是怎样起作用的？
- 1
画完就只剩像素
往 Canvas 上画一个圆，浏览器只是把对应位置的像素涂上颜色，并不记得「这里有个圆」。想让圆动起来，就要每一帧先把画布擦干净，再按新位置重画一遍，通常用 requestAnimationFrame 每秒画 60 次。因为页面里始终只有一个 canvas 元素，画 3000 个粒子也比创建 3000 个 div 快得多：每改一个 div 的位置，浏览器都要重新计算样式和布局。
- 2
点击和读屏要自己处理
画布上的东西不是页面元素，用户点击时，事件的目标永远是整块 canvas。要知道点中了哪个图形，得自己用点击坐标去和所有图形的位置逐个比较。读屏软件也看不到画布里的内容，所以重要的信息（比如图表的数值）要另外用文字提供。按钮、表单这类要交互、要被读屏的界面，不该画在 Canvas 里。
- 3
高分屏要按设备像素比放大
canvas 的 width、height 属性是画布真正的像素数，CSS 设置的宽高只是显示大小。在设备像素比为 2 或 3 的高分屏上，如果画布只按 CSS 尺寸画，浏览器只能把它拉伸显示，图形边缘发糊。常见做法是把 width、height 乘上 devicePixelRatio，再用 scale 把坐标缩回来，这一步很容易漏。
容易混淆的地方
Canvas 和 SVG 都能画图：SVG 的每个形状都是页面元素，可以单独点击、加样式、被读屏读到，数量多了会变慢；Canvas 只有一块像素，数量再多也快，但交互要自己做。WebGL 也是画在 canvas 元素上的，只是用的是另一套接口，借助显卡做 3D 和大量图形渲染。
什么时候用
适合用
- 官网首屏的粒子、星空、流体这类大量元素的动态背景。
- 在线画板、图片裁剪和加水印，需要逐像素处理图片。
- 数据点上万的图表或小游戏，需要每秒重画几十次。
不适合用
- 按钮、菜单、表单这类要点击、要被读屏的界面，别画在 Canvas 里；用普通 HTML 元素。
- 只有几个图标或一张简单示意图时，别用 Canvas；SVG 更清晰，也更容易改样式。
- 需要被搜索引擎收录的文字，别画进 Canvas；画进去的文字搜索不到。
练一练选一个答案，看看解释
你要做一个官网背景：3000 个粒子跟着鼠标散开。另外页面上还有一个「免费试用」按钮。怎么分工最合适？
让 AI 帮你做复制给 AI Agent 直接用
请用 Canvas 实现【大量图形的绘制，如：官网首屏跟随鼠标散开的粒子背景】。先阅读页面结构，确认画布放在哪个区域、上面叠了哪些可交互元素，以及项目里是否已有类似的绘制代码。要求：用 requestAnimationFrame 每帧重画，粒子数据放在普通变量里而不是 React 状态；画布尺寸乘以 devicePixelRatio 并用 scale 缩回，窗口大小变化时重新设置；按钮和文字仍用 HTML 叠在上方；页面不可见时暂停动画，组件卸载时停止循环；开启减少动效时只画静态画面。不改无关代码。最后说明在高分屏和低端手机上分别怎么验证清晰度和帧率。