浏览器、网络与安全 · KNOWLEDGE CHAPTER

K35

Canvas与图形渲染

Canvas 保存的是绘制后的像素，场景含义、图形身份与重画顺序由应用保留。局部重绘不是“只画改动对象”，而是重新构造所有可能变化的像素；SVG 则保留可由 DOM 管理的图形结构。

浏览器、网络与安全2 道章节练习2 道主练关联

先修知识：K03 · 盒模型与布局 K06 · 渲染与动效 K12 · 页面生命周期与调度 K17 · DOM 事件与观察器

核心模型

原理与机制

场景模型与像素输出分离

Canvas 2D 的命令执行后留下位图，图形不自动成为可查找的 DOM 节点。应用需保存几何、样式、变换、层级与业务 ID，点击时由命中检测把坐标映射回图形。SVG 把图形表达为文档元素，样式、事件和结构关联更直接，但大量节点和更新也有成本。ECharts 统一使用方式不代表底层执行成本相同；渲染器应按数据量、动画、交互、实例数和设备内存比较，而非先入为主认定 Canvas 更快。

脏区描述旧画面与新画面的差异

移动图形须覆盖旧、新影响范围，删除仍保留旧范围；描边、阴影、滤镜与变换都可能让像素影响超出几何包围盒。先统一场景、CSS 与设备像素坐标，再保守向外取整。清除脏区后，所有与该区域相关的对象都必须按原绘制层级重放，包括没修改却被露出的背景；否则移动半透明对象可能留下旧影或把背景越叠越深。空间索引只能筛候选，查询返回顺序不等于绘制顺序。

绘图状态不是像素历史

save、restore 保存与恢复变换、裁剪、样式等状态，不会恢复被 clearRect 擦掉的像素；当前默认路径也不在这份状态栈里。局部绘制应保存状态，用 beginPath 或独立 Path2D 建立裁剪，再清理并重放，最后恢复；clip 只会与已有裁剪求交，不能随意扩大已有裁剪范围。扩脏区修边缘后也必须扩大候选查询。复杂混合、背景依赖或滤镜无法给出可靠局部影响时，应扩大到整层甚至全画布，先保证等价再优化。

分辨率、内存和调度是同一预算

CSS 尺寸决定布局，canvas.width 与 height 决定绘图缓冲；常按 CSS 尺寸乘 DPR 设置，再把绘图坐标映射回 CSS 单位。DPR 加倍，像素数量约增四倍，多个图表实例会放大内存。更改 width 或 height 会重置绘图状态，因此只在实际尺寸变化时设置，并重建变换与重绘；不要让内在尺寸反向撑大观察容器。脏区过多或接近全屏时全量重绘可能更便宜，用 rAF 合并更新，并同时测帧耗时、内存和视觉差异。

先证明局部结果等价，再比较速度

保留全量渲染作为参照，给同一组场景编辑分别执行局部与全量路径，对比截图或像素差异；测试删除、重叠透明、旋转、负坐标、缩放及不同 DPR。再统计候选查询、排序、清除与绘制各阶段耗时，避免只测被优化的一段。视觉一致仍不代表交互完整：命中检测要使用正确逆变换，键盘操作与图表文本摘要需要独立设计，不能期待位图或 SVG 元素数量自动证明可访问性。

最小示例

javascript

function repaintRect(ctx, rect, orderedCandidates) {
  // 前提：rect 与绘图命令同一坐标系；候选包含所需背景并按 z 排序。
  const { x, y, width, height } = rect;
  const clip = new Path2D();
  clip.rect(x, y, width, height);
  ctx.save();
  try {
    ctx.clip(clip);
    ctx.clearRect(x, y, width, height);
    for (const shape of orderedCandidates) {
      ctx.save();
      try { shape.draw(ctx); }
      finally { ctx.restore(); }
    }
  } finally { ctx.restore(); }
}

示例只演示重绘协议，不提供空间索引或影响范围计算。调用方应传入已经扩张并取整的脏区及按层级排序的全部相关对象，每个 draw 自己新建路径或使用 Path2D。移动红色半透明块时，原位置恢复背景、新位置只叠加一次；若候选只有红块，清除后就会出现背景缺口。

环境：支持 Canvas 2D 与 Path2D 的现代浏览器；调用方传入同坐标系的脏区、完整有序候选与遵守路径/状态约定的 draw。

核验：已静态审查示例与本章机制一致；未运行此示例，未进行框架或浏览器集成测试。观察结果为待复现的教学预期。

边界与取舍

边界

restore 恢复状态，不恢复像素，也不恢复当前默认路径；局部重绘必须能从场景模型重新构造内容。
固定加一像素不涵盖任意阴影、滤镜或变换；复杂混合可能需要整层重绘。
SVG 的矢量边缘可随缩放重栅格化，但嵌入位图不会增加细节；两种渲染器都不自动提供完整可访问交互。

取舍

空间索引与脏区合并减少候选绘制，却增加维护、查询和排序成本；覆盖大时应回退全量。
提高 DPR 改善清晰度却按平方增加像素预算；多实例场景需同时比较 Canvas、SVG 与不可见实例卸载。

口述示范

我先保留可重放的场景，再把脏区定义为旧新画面可能不同的像素集合。清除后按原层级重画全部相关对象，并正确隔离路径和绘图状态。Canvas 与 SVG 的选择最终由相同场景下的帧耗时、内存、交互和可访问性验证。

章节练习

练习 1

协同白板删除带阴影的半透明图形后出现白边与背景变淡，如何定位？

展开检查点

脏区保留旧影响盒，覆盖阴影、变换与设备像素边界。
裁剪后清理并按原层级重画全部候选，扩大脏区时扩大查询。
与全量结果做像素或截图对照，复杂混合回退整层。

同页四十个小图在手机上占内存过高，制定渲染器实验。