跳到主要内容

绘制模型

Canvas 2D 的三个独立概念经常被混成一个「当前状态」：

  1. Backing store：真正的像素缓冲区（canvas.width × canvas.height）。
  2. Drawing state 栈：CTM、clip、样式、阴影、合成、字体……由 save / restore 管理。
  3. Current default path：当前默认路径。它不是 drawing state，不进栈。

把这三件事拆开，后面的命中、DPR、性能才有落点。

文档清单​

文档解决的问题
位图表面与立即模式width/height 一改为何清空画布；和 CSS 尺寸的关系
状态栈与当前路径save 到底保存什么；为什么 restore 后 path 还在
坐标系与变换矩阵CTM、getTransform、局部坐标与屏幕坐标互换

先决条件​

  • 会 TypeScript，能拿到 HTMLCanvasElement。
  • 不要求 WebGL。

快速自检​

  1. 设置 canvas.width = 800 会不会丢掉已经画的内容？为什么？
  2. save() 之后 beginPath() 画了新路径，restore() 后当前路径是什么？
  3. isPointInPath 的 (x, y) 处在哪套坐标系？路径会不会再乘一次 CTM？