Canvas状态机、绘制模型与性能瓶颈Canvas状态机、绘制模型与性能瓶颈引言 Canvas API作为Web图形绘

Canvas状态机、绘制模型与性能瓶颈

引言

Canvas API作为Web图形绘制的核心工具，其背后隐藏着精妙的状态机设计和独特的绘制模型。理解Canvas的状态管理机制、绘制模型的工作原理，以及识别并解决性能瓶颈，是构建高性能图形应用的关键。本文将深入剖析Canvas的状态机机制，探讨即时绘制模型的特性，并系统分析常见的性能瓶颈及其优化策略，帮助开发者编写更高效的Canvas应用。

一、Canvas状态机原理

1.1 状态机的概念

Canvas采用基于**栈（Stack）**的状态机设计，每个绘图上下文维护一个状态栈。状态包含了所有影响绘制结果的属性，如变换矩阵、裁剪区域、样式属性等。

Canvas状态包含的属性：

变换矩阵（transform、translate、rotate、scale）
裁剪路径（clip）
样式属性（fillStyle、strokeStyle、lineWidth、lineCap等）
合成属性（globalAlpha、globalCompositeOperation）
阴影属性（shadowColor、shadowBlur、shadowOffsetX/Y）
文本属性（font、textAlign、textBaseline）
图像平滑（imageSmoothingEnabled）

graph TD
    A[Canvas Context] --> B[状态栈]
    B --> C[当前状态 Top]
    C --> D[状态属性集合]
    D --> E[变换矩阵]
    D --> F[样式属性]
    D --> G[裁剪区域]
    D --> H[合成模式]
    B --> I[保存的状态1]
    B --> J[保存的状态2]
    B --> K[...]

1.2 save() 和 restore() 方法

save()方法将当前状态推入栈顶，restore()方法从栈中弹出最近保存的状态并恢复。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 初始状态
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 50, 50);

// 保存当前状态
ctx.save();

// 修改状态
ctx.fillStyle = 'red';
ctx.translate(100, 0);
ctx.fillRect(10, 10, 50, 50);

// 恢复到保存的状态
ctx.restore();

// fillStyle恢复为blue，translate被重置
ctx.fillRect(10, 70, 50, 50);

1.3 状态栈的工作机制

状态栈采用**后进先出（LIFO）**的数据结构，支持嵌套的状态保存与恢复。

sequenceDiagram
    participant Code as JavaScript代码
    participant Ctx as Canvas Context
    participant Stack as 状态栈

    Code->>Ctx: 设置 fillStyle = 'red'
    Code->>Ctx: save()
    Ctx->>Stack: 推入状态 {fillStyle:'red'}

    Code->>Ctx: 设置 fillStyle = 'blue'
    Code->>Ctx: save()
    Ctx->>Stack: 推入状态 {fillStyle:'blue'}

    Code->>Ctx: 设置 fillStyle = 'green'
    Note over Ctx: 当前状态: fillStyle='green'

    Code->>Ctx: restore()
    Stack->>Ctx: 弹出状态 {fillStyle:'blue'}
    Note over Ctx: 恢复后: fillStyle='blue'

    Code->>Ctx: restore()
    Stack->>Ctx: 弹出状态 {fillStyle:'red'}
    Note over Ctx: 恢复后: fillStyle='red'

嵌套状态管理示例：

ctx.fillStyle = 'black';

ctx.save(); // 保存状态1
ctx.fillStyle = 'red';
ctx.translate(50, 0);

  ctx.save(); // 保存状态2
  ctx.fillStyle = 'green';
  ctx.scale(2, 2);
  ctx.fillRect(0, 0, 20, 20); // 绿色，放大2倍，偏移50px

  ctx.restore(); // 恢复状态2
  ctx.fillRect(0, 30, 20, 20); // 红色，不放大，偏移50px

ctx.restore(); // 恢复状态1
ctx.fillRect(0, 60, 20, 20); // 黑色，不放大，不偏移

1.4 状态管理的性能影响

频繁调用save/restore会产生内存和CPU开销，应当合理使用。

优化建议：

// ❌ 不推荐：每次绘制都save/restore
for (let item of items) {
  ctx.save();
  ctx.fillStyle = item.color;
  ctx.fillRect(item.x, item.y, 50, 50);
  ctx.restore();
}

// ✅ 推荐：手动管理状态
const prevStyle = ctx.fillStyle;
for (let item of items) {
  ctx.fillStyle = item.color;
  ctx.fillRect(item.x, item.y, 50, 50);
}
ctx.fillStyle = prevStyle;

二、Canvas绘制模型深度解析

2.1 即时模式 vs 保留模式

Canvas采用即时模式（Immediate Mode），与SVG的**保留模式（Retained Mode）**形成鲜明对比。

特性	Canvas（即时模式）	SVG（保留模式）
绘制方式	立即执行，无记忆	构建DOM树，保留结构
交互性	需手动实现事件检测	原生事件支持
性能	大量对象时性能好	大量对象时性能差
内存占用	低（仅位图）	高（DOM节点）
适用场景	游戏、数据可视化	图表、图标、简单动画

即时模式工作流程：

graph LR
    A[JavaScript调用] --> B[绘图命令]
    B --> C[更新后备缓冲区]
    C --> D[显示到屏幕]
    D --> E[帧结束,状态丢失]
    E -.-> F[下一帧需重新绘制]

示例对比：

// Canvas即时模式 - 无对象保留
ctx.fillRect(10, 10, 50, 50);
// 绘制完成后，Canvas不记得这个矩形的存在

// SVG保留模式 - 保留对象引用
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', 10);
rect.setAttribute('y', 10);
svg.appendChild(rect);
// 可以随时访问和修改rect对象

2.2 绘制上下文的工作原理

Canvas绘制上下文维护一个后备缓冲区（Backing Store），所有绘制操作最终都写入这个位图。

绘制流程：

graph TD
    A[绘图API调用] --> B{命令类型}
    B -->|路径命令| C[路径构建器]
    B -->|直接绘制| D[光栅化引擎]
    C --> E[生成几何数据]
    E --> D
    D --> F[更新后备缓冲区]
    F --> G{需要显示}
    G -->|是| H[合成到屏幕]
    G -->|否| I[等待下一帧]

后备缓冲区示例：

// 创建Canvas时分配后备缓冲区
const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
// 实际分配: 800 * 600 * 4 字节 (RGBA) = 1.92MB

const ctx = canvas.getContext('2d');

// 所有绘制操作写入后备缓冲区
ctx.fillRect(0, 0, 100, 100);

// 读取后备缓冲区数据
const imageData = ctx.getImageData(0, 0, 800, 600);
console.log(imageData.data.length); // 1920000 (800*600*4)

2.3 图形变换矩阵

Canvas使用3x3仿射变换矩阵实现平移、旋转、缩放、倾斜等变换。

变换矩阵数学表示：

| a  c  e |   | x |   | ax + cy + e |
| b  d  f | × | y | = | bx + dy + f |
| 0  0  1 |   | 1 |   |      1      |

a, d：缩放（scaleX, scaleY）
b, c：倾斜（skewY, skewX）
e, f：平移（translateX, translateY）

变换操作示例：

// 获取当前变换矩阵
const matrix = ctx.getTransform();
console.log(matrix); // DOMMatrix {a, b, c, d, e, f}

// 复合变换：先平移，再旋转
ctx.translate(100, 100);  // e=100, f=100
ctx.rotate(Math.PI / 4);  // 旋转45度
ctx.fillRect(0, 0, 50, 50);

// 使用setTransform直接设置矩阵
ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置为单位矩阵

// 使用transform累积变换
ctx.transform(2, 0, 0, 2, 0, 0); // 缩放2倍

矩阵变换链：

graph LR
    A[初始矩阵 I] --> B[translate 100,50]
    B --> C[rotate π/6]
    C --> D[scale 2,2]
    D --> E[最终矩阵 M]
    E --> F[应用到所有顶点]

实用变换函数：

// 围绕任意点旋转
function rotateAroundPoint(ctx, x, y, angle) {
  ctx.translate(x, y);
  ctx.rotate(angle);
  ctx.translate(-x, -y);
}

// 使用
ctx.save();
rotateAroundPoint(ctx, 150, 150, Math.PI / 4);
ctx.fillRect(125, 125, 50, 50);
ctx.restore();

三、Canvas性能瓶颈分析

3.1 性能瓶颈分类

Canvas性能问题通常源于三个方面：CPU瓶颈、GPU瓶颈、内存瓶颈。

graph TD
    A[Canvas性能瓶颈] --> B[CPU瓶颈]
    A --> C[GPU瓶颈]
    A --> D[内存瓶颈]

    B --> B1[JavaScript执行慢]
    B --> B2[过多的API调用]
    B --> B3[复杂的路径计算]

    C --> C1[填充率不足]
    C --> C2[纹理上传开销]
    C --> C3[过度绘制]

    D --> D1[后备缓冲区过大]
    D --> D2[图像数据缓存]
    D --> D3[离屏Canvas过多]

3.2 CPU瓶颈详解

主要表现：

JavaScript执行时间过长
帧率低于60fps，但GPU利用率不高
Performance面板显示大量脚本执行时间

常见原因：

// ❌ 问题1：每帧大量对象遍历
function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 遍历10000个对象
  particles.forEach(p => {
    p.update(); // 物理计算
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
    ctx.fill();
  });

  requestAnimationFrame(render);
}

// ❌ 问题2：频繁的三角函数计算
for (let i = 0; i < 1000; i++) {
  const x = Math.cos(angle) * radius;
  const y = Math.sin(angle) * radius;
  ctx.fillRect(x, y, 5, 5);
}

优化方案：

// ✅ 优化1：使用类型化数组减少GC
class ParticleSystem {
  constructor(count) {
    this.count = count;
    this.positions = new Float32Array(count * 2); // x, y交替存储
    this.velocities = new Float32Array(count * 2);
  }

  update() {
    for (let i = 0; i < this.count * 2; i++) {
      this.positions[i] += this.velocities[i];
    }
  }
}

// ✅ 优化2：预计算查找表
const SIN_TABLE = new Float32Array(360);
const COS_TABLE = new Float32Array(360);
for (let i = 0; i < 360; i++) {
  const rad = (i * Math.PI) / 180;
  SIN_TABLE[i] = Math.sin(rad);
  COS_TABLE[i] = Math.cos(rad);
}

// 使用查找表
const x = COS_TABLE[angleDeg | 0] * radius;
const y = SIN_TABLE[angleDeg | 0] * radius;

3.3 GPU瓶颈详解

主要表现：

即使JavaScript执行快，帧率仍然低
大分辨率Canvas性能显著下降
移动设备上尤为明显

常见原因：

// ❌ 问题：过大的Canvas尺寸
const canvas = document.getElementById('game');
canvas.width = window.innerWidth * devicePixelRatio; // 如 3840
canvas.height = window.innerHeight * devicePixelRatio; // 如 2160
// 4K分辨率需要填充 33,177,600 像素/帧

优化方案：

// ✅ 优化1：限制Canvas分辨率
const maxWidth = 1920;
const maxHeight = 1080;
const scale = Math.min(
  maxWidth / window.innerWidth,
  maxHeight / window.innerHeight,
  devicePixelRatio
);

canvas.width = window.innerWidth * scale;
canvas.height = window.innerHeight * scale;

// ✅ 优化2：使用CSS缩放显示
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';

3.4 内存瓶颈详解

主要表现：

内存占用持续增长
浏览器标签页崩溃
移动设备上频繁卡顿

内存消耗计算：

// Canvas后备缓冲区内存占用
const memoryBytes = canvas.width * canvas.height * 4; // RGBA，每像素4字节

// 示例：4K Canvas内存
const mem4K = 3840 * 2160 * 4; // 33,177,600 字节 ≈ 31.64 MB

// 如果有10个离屏Canvas，总内存约316MB

优化方案：

// ✅ 优化：复用离屏Canvas
class OffscreenCanvasPool {
  constructor() {
    this.pool = [];
  }

  acquire(width, height) {
    let canvas = this.pool.find(c =>
      c.width === width && c.height === height
    );

    if (!canvas) {
      canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
    } else {
      this.pool = this.pool.filter(c => c !== canvas);
    }

    return canvas;
  }

  release(canvas) {
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    this.pool.push(canvas);
  }
}

const pool = new OffscreenCanvasPool();

四、常见性能问题与解决方案

4.1 过度绘制（Overdraw）

问题描述：同一像素被多次绘制，浪费GPU填充率。

graph LR
    A[绘制背景] --> B[绘制层1]
    B --> C[绘制层2]
    C --> D[绘制层3]
    D --> E[最终可见:仅层3]
    style E fill:#f96

检测方法：

// 使用Performance API检测绘制时间
performance.mark('draw-start');
ctx.fillRect(0, 0, canvas.width, canvas.height); // 全屏背景
// ... 更多绘制
performance.mark('draw-end');
performance.measure('draw-time', 'draw-start', 'draw-end');

优化策略：

// ✅ 剔除完全被遮挡的对象
class Renderer {
  render(objects) {
    // 按Z-index排序
    objects.sort((a, b) => a.z - b.z);

    const visibleObjects = [];
    const coveredArea = new Set();

    // 从上到下检查，跳过被完全遮挡的对象
    for (let i = objects.length - 1; i >= 0; i--) {
      const obj = objects[i];
      if (!this.isFullyCovered(obj, coveredArea)) {
        visibleObjects.push(obj);
        this.addToCoveredArea(obj, coveredArea);
      }
    }

    visibleObjects.forEach(obj => obj.draw(ctx));
  }
}

4.2 状态切换开销

问题描述：频繁切换fillStyle、strokeStyle等状态导致性能下降。

// ❌ 低效：每次绘制切换状态
shapes.forEach(shape => {
  ctx.fillStyle = shape.color;
  ctx.globalAlpha = shape.alpha;
  ctx.fillRect(shape.x, shape.y, shape.w, shape.h);
});

优化方案：

// ✅ 高效：按状态分组批量绘制
const groupedByColor = new Map();
shapes.forEach(shape => {
  const key = `${shape.color}-${shape.alpha}`;
  if (!groupedByColor.has(key)) {
    groupedByColor.set(key, []);
  }
  groupedByColor.get(key).push(shape);
});

groupedByColor.forEach((group, key) => {
  const [color, alpha] = key.split('-');
  ctx.fillStyle = color;
  ctx.globalAlpha = parseFloat(alpha);

  group.forEach(shape => {
    ctx.fillRect(shape.x, shape.y, shape.w, shape.h);
  });
});

4.3 大规模路径渲染

问题描述：单个路径包含数千个顶点，光栅化耗时过长。

// ❌ 问题：单个路径包含大量点
ctx.beginPath();
for (let i = 0; i < 10000; i++) {
  const x = i;
  const y = Math.sin(i * 0.01) * 100;
  if (i === 0) ctx.moveTo(x, y);
  else ctx.lineTo(x, y);
}
ctx.stroke(); // 光栅化10000个线段

优化方案：

// ✅ 优化1：路径简化算法（Douglas-Peucker）
function simplifyPath(points, tolerance) {
  if (points.length <= 2) return points;

  // 找到距离首尾连线最远的点
  let maxDist = 0;
  let maxIndex = 0;

  for (let i = 1; i < points.length - 1; i++) {
    const dist = perpendicularDistance(
      points[i],
      points[0],
      points[points.length - 1]
    );
    if (dist > maxDist) {
      maxDist = dist;
      maxIndex = i;
    }
  }

  // 递归简化
  if (maxDist > tolerance) {
    const left = simplifyPath(points.slice(0, maxIndex + 1), tolerance);
    const right = simplifyPath(points.slice(maxIndex), tolerance);
    return left.slice(0, -1).concat(right);
  } else {
    return [points[0], points[points.length - 1]];
  }
}

// ✅ 优化2：分段绘制
const chunkSize = 1000;
for (let i = 0; i < points.length; i += chunkSize) {
  ctx.beginPath();
  const chunk = points.slice(i, i + chunkSize);
  chunk.forEach((p, idx) => {
    if (idx === 0) ctx.moveTo(p.x, p.y);
    else ctx.lineTo(p.x, p.y);
  });
  ctx.stroke();
}

4.4 文本渲染性能

问题描述：文本渲染涉及字体光栅化，开销较大。

// ❌ 问题：每帧重新渲染大量文本
function drawLabels() {
  labels.forEach(label => {
    ctx.font = '14px Arial';
    ctx.fillText(label.text, label.x, label.y);
  });
}

优化方案：

// ✅ 优化：文本缓存到纹理
class TextCache {
  constructor() {
    this.cache = new Map();
  }

  getTextCanvas(text, font, color) {
    const key = `${text}-${font}-${color}`;

    if (this.cache.has(key)) {
      return this.cache.get(key);
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    ctx.font = font;

    const metrics = ctx.measureText(text);
    canvas.width = metrics.width;
    canvas.height = 20; // 根据字体大小调整

    ctx.font = font;
    ctx.fillStyle = color;
    ctx.fillText(text, 0, 15);

    this.cache.set(key, canvas);
    return canvas;
  }
}

const textCache = new TextCache();

// 使用缓存
const textCanvas = textCache.getTextCanvas('Hello', '14px Arial', 'black');
ctx.drawImage(textCanvas, x, y);

五、高级性能优化技术

5.1 脏区域检测（Dirty Region）

只重绘发生变化的区域，而非整个Canvas。

class DirtyRectManager {
  constructor(canvas) {
    this.canvas = canvas;
    this.dirtyRects = [];
  }

  addDirtyRect(x, y, width, height) {
    this.dirtyRects.push({ x, y, width, height });
  }

  merge() {
    if (this.dirtyRects.length === 0) return null;

    let minX = Infinity, minY = Infinity;
    let maxX = -Infinity, maxY = -Infinity;

    this.dirtyRects.forEach(rect => {
      minX = Math.min(minX, rect.x);
      minY = Math.min(minY, rect.y);
      maxX = Math.max(maxX, rect.x + rect.width);
      maxY = Math.max(maxY, rect.y + rect.height);
    });

    return {
      x: minX,
      y: minY,
      width: maxX - minX,
      height: maxY - minY
    };
  }

  clear() {
    this.dirtyRects = [];
  }
}

// 使用
const dirtyManager = new DirtyRectManager(canvas);

function update() {
  objects.forEach(obj => {
    if (obj.moved) {
      dirtyManager.addDirtyRect(obj.oldX, obj.oldY, obj.width, obj.height);
      dirtyManager.addDirtyRect(obj.x, obj.y, obj.width, obj.height);
    }
  });
}

function render() {
  const dirtyRect = dirtyManager.merge();
  if (dirtyRect) {
    ctx.clearRect(dirtyRect.x, dirtyRect.y, dirtyRect.width, dirtyRect.height);
    // 仅重绘脏区域内的对象
    objects.forEach(obj => {
      if (intersects(obj, dirtyRect)) {
        obj.draw(ctx);
      }
    });
  }
  dirtyManager.clear();
}

5.2 分层渲染（Layered Rendering）

将静态内容和动态内容分离到不同Canvas层。

class LayeredCanvas {
  constructor(width, height) {
    // 背景层（静态）
    this.bgCanvas = this.createCanvas(width, height);
    this.bgCtx = this.bgCanvas.getContext('2d');

    // 游戏对象层（动态）
    this.gameCanvas = this.createCanvas(width, height);
    this.gameCtx = this.gameCanvas.getContext('2d');

    // UI层（偶尔更新）
    this.uiCanvas = this.createCanvas(width, height);
    this.uiCtx = this.uiCanvas.getContext('2d');

    // 显示Canvas
    this.displayCanvas = this.createCanvas(width, height);
    this.displayCtx = this.displayCanvas.getContext('2d');

    document.body.appendChild(this.displayCanvas);
  }

  createCanvas(width, height) {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    return canvas;
  }

  drawBackground() {
    // 仅绘制一次
    this.bgCtx.fillStyle = '#f0f0f0';
    this.bgCtx.fillRect(0, 0, this.bgCanvas.width, this.bgCanvas.height);
    // ... 绘制静态背景元素
  }

  render() {
    // 仅清除游戏层
    this.gameCtx.clearRect(0, 0, this.gameCanvas.width, this.gameCanvas.height);

    // 绘制动态对象
    objects.forEach(obj => obj.draw(this.gameCtx));

    // 合成所有层
    this.displayCtx.clearRect(0, 0, this.displayCanvas.width, this.displayCanvas.height);
    this.displayCtx.drawImage(this.bgCanvas, 0, 0);
    this.displayCtx.drawImage(this.gameCanvas, 0, 0);
    this.displayCtx.drawImage(this.uiCanvas, 0, 0);
  }
}

5.3 使用OffscreenCanvas多线程渲染

将渲染工作转移到Web Worker，释放主线程。

// main.js
const canvas = document.getElementById('game');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('render-worker.js');

worker.postMessage({
  type: 'init',
  canvas: offscreen,
  width: 800,
  height: 600
}, [offscreen]);

worker.postMessage({
  type: 'update',
  entities: serializableEntities
});

// render-worker.js
let ctx;

self.onmessage = function(e) {
  if (e.data.type === 'init') {
    const canvas = e.data.canvas;
    canvas.width = e.data.width;
    canvas.height = e.data.height;
    ctx = canvas.getContext('2d');
    animate();
  } else if (e.data.type === 'update') {
    // 更新实体数据
    updateEntities(e.data.entities);
  }
};

function animate() {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  // 执行渲染
  render(ctx);

  requestAnimationFrame(animate);
}

5.4 对象池模式（Object Pooling）

避免频繁创建和销毁对象，减少垃圾回收压力。

class ObjectPool {
  constructor(createFn, resetFn, initialSize = 100) {
    this.createFn = createFn;
    this.resetFn = resetFn;
    this.pool = [];

    // 预分配对象
    for (let i = 0; i < initialSize; i++) {
      this.pool.push(this.createFn());
    }
  }

  acquire() {
    if (this.pool.length > 0) {
      return this.pool.pop();
    }
    return this.createFn();
  }

  release(obj) {
    this.resetFn(obj);
    this.pool.push(obj);
  }
}

// 使用
const particlePool = new ObjectPool(
  () => ({ x: 0, y: 0, vx: 0, vy: 0, life: 0 }),
  (p) => { p.x = 0; p.y = 0; p.vx = 0; p.vy = 0; p.life = 0; },
  1000
);

// 创建粒子
function spawnParticle(x, y) {
  const particle = particlePool.acquire();
  particle.x = x;
  particle.y = y;
  particle.vx = Math.random() * 2 - 1;
  particle.vy = Math.random() * 2 - 1;
  particle.life = 100;
  activeParticles.push(particle);
}

// 回收粒子
function updateParticles() {
  for (let i = activeParticles.length - 1; i >= 0; i--) {
    const p = activeParticles[i];
    p.life--;

    if (p.life <= 0) {
      particlePool.release(p);
      activeParticles.splice(i, 1);
    }
  }
}

六、性能监控与诊断

6.1 使用Chrome DevTools

Performance面板关键指标：

graph TD
    A[录制性能] --> B[查看帧率图表]
    B --> C{FPS < 60?}
    C -->|是| D[分析主线程活动]
    C -->|否| E[性能良好]

    D --> F{长任务 > 50ms?}
    F -->|是| G[优化JavaScript]
    F -->|否| H[检查渲染时间]

    H --> I{Paint > 16ms?}
    I -->|是| J[减少绘制复杂度]
    I -->|否| K[检查合成时间]

关键指标解读：

FPS（Frames Per Second）：目标60fps，低于30fps用户可感知卡顿
Scripting Time：JavaScript执行时间，应< 10ms/帧
Rendering Time：包含样式计算、布局、绘制
Painting Time：Canvas绘制时间，应< 5ms/帧

6.2 自定义性能监控

class PerformanceMonitor {
  constructor() {
    this.metrics = {
      fps: 0,
      frameTime: 0,
      drawCalls: 0,
      objectCount: 0
    };

    this.frameTimes = [];
    this.lastTime = performance.now();
  }

  beginFrame() {
    this.frameStart = performance.now();
    this.metrics.drawCalls = 0;
  }

  endFrame() {
    const now = performance.now();
    const frameTime = now - this.frameStart;

    this.frameTimes.push(frameTime);
    if (this.frameTimes.length > 60) {
      this.frameTimes.shift();
    }

    // 计算平均帧时间
    const avgFrameTime = this.frameTimes.reduce((a, b) => a + b) / this.frameTimes.length;
    this.metrics.frameTime = avgFrameTime.toFixed(2);
    this.metrics.fps = (1000 / avgFrameTime).toFixed(1);
  }

  recordDrawCall() {
    this.metrics.drawCalls++;
  }

  display(ctx) {
    ctx.save();
    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
    ctx.fillRect(10, 10, 200, 100);

    ctx.fillStyle = '#0f0';
    ctx.font = '14px monospace';
    ctx.fillText(`FPS: ${this.metrics.fps}`, 20, 30);
    ctx.fillText(`Frame: ${this.metrics.frameTime}ms`, 20, 50);
    ctx.fillText(`Draws: ${this.metrics.drawCalls}`, 20, 70);
    ctx.fillText(`Objects: ${this.metrics.objectCount}`, 20, 90);
    ctx.restore();
  }
}

// 使用
const monitor = new PerformanceMonitor();

function gameLoop() {
  monitor.beginFrame();

  // 渲染逻辑
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  objects.forEach(obj => {
    obj.draw(ctx);
    monitor.recordDrawCall();
  });

  monitor.metrics.objectCount = objects.length;
  monitor.endFrame();
  monitor.display(ctx);

  requestAnimationFrame(gameLoop);
}

6.3 性能基准测试

class Benchmark {
  static measure(name, fn, iterations = 1000) {
    // 预热
    for (let i = 0; i < 100; i++) fn();

    const start = performance.now();
    for (let i = 0; i < iterations; i++) {
      fn();
    }
    const end = performance.now();

    const totalTime = end - start;
    const avgTime = totalTime / iterations;

    console.log(`${name}:`);
    console.log(`  Total: ${totalTime.toFixed(2)}ms`);
    console.log(`  Average: ${avgTime.toFixed(4)}ms`);
    console.log(`  Ops/sec: ${(1000 / avgTime).toFixed(0)}`);
  }
}

// 对比测试
Benchmark.measure('fillRect', () => {
  ctx.fillRect(0, 0, 100, 100);
});

Benchmark.measure('Path + fill', () => {
  ctx.beginPath();
  ctx.rect(0, 0, 100, 100);
  ctx.fill();
});

七、实战案例：粒子系统性能优化

7.1 初始实现（未优化）

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 4 - 2;
    this.vy = Math.random() * 4 - 2;
    this.life = 100;
    this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.life--;
  }

  draw(ctx) {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
    ctx.fill();
  }
}

// 性能：10000粒子 ≈ 20fps

7.2 优化后实现

class OptimizedParticleSystem {
  constructor(maxParticles) {
    this.count = 0;
    this.maxParticles = maxParticles;

    // 使用类型化数组
    this.positions = new Float32Array(maxParticles * 2);
    this.velocities = new Float32Array(maxParticles * 2);
    this.life = new Uint16Array(maxParticles);
    this.colors = new Uint32Array(maxParticles); // 存储预计算的颜色

    // 预渲染粒子纹理
    this.particleTexture = this.createParticleTexture();
  }

  createParticleTexture() {
    const size = 8;
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    const gradient = ctx.createRadialGradient(size/2, size/2, 0, size/2, size/2, size/2);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, size, size);

    return canvas;
  }

  spawn(x, y) {
    if (this.count >= this.maxParticles) return;

    const i = this.count;
    this.positions[i * 2] = x;
    this.positions[i * 2 + 1] = y;
    this.velocities[i * 2] = Math.random() * 4 - 2;
    this.velocities[i * 2 + 1] = Math.random() * 4 - 2;
    this.life[i] = 100;
    this.colors[i] = Math.random() * 360 | 0;

    this.count++;
  }

  update() {
    for (let i = this.count - 1; i >= 0; i--) {
      this.positions[i * 2] += this.velocities[i * 2];
      this.positions[i * 2 + 1] += this.velocities[i * 2 + 1];
      this.life[i]--;

      // 移除死亡粒子
      if (this.life[i] <= 0) {
        this.removeParticle(i);
      }
    }
  }

  removeParticle(index) {
    const last = this.count - 1;
    if (index !== last) {
      // 用最后一个粒子填充空位
      this.positions[index * 2] = this.positions[last * 2];
      this.positions[index * 2 + 1] = this.positions[last * 2 + 1];
      this.velocities[index * 2] = this.velocities[last * 2];
      this.velocities[index * 2 + 1] = this.velocities[last * 2 + 1];
      this.life[index] = this.life[last];
      this.colors[index] = this.colors[last];
    }
    this.count--;
  }

  render(ctx) {
    // 批量设置混合模式
    ctx.globalCompositeOperation = 'lighter';

    for (let i = 0; i < this.count; i++) {
      const x = this.positions[i * 2];
      const y = this.positions[i * 2 + 1];
      const alpha = this.life[i] / 100;

      ctx.globalAlpha = alpha;
      ctx.drawImage(this.particleTexture, x - 4, y - 4);
    }

    ctx.globalAlpha = 1;
    ctx.globalCompositeOperation = 'source-over';
  }
}

// 性能：10000粒子 ≈ 60fps

7.3 性能对比

指标	未优化	优化后	提升
10000粒子FPS	20fps	60fps	3x
内存占用	~80MB	~12MB	6.7x
GC频率	每秒5次	每秒0.5次	10x
CPU使用率	90%	35%	2.6x

八、最佳实践总结

8.1 状态管理最佳实践

// ✅ 最小化save/restore调用
function drawWithTransform(ctx, x, y, rotation, drawFn) {
  const cos = Math.cos(rotation);
  const sin = Math.sin(rotation);

  // 直接使用transform避免save/restore
  const m = ctx.getTransform();
  ctx.transform(cos, sin, -sin, cos, x, y);
  drawFn(ctx);
  ctx.setTransform(m); // 恢复原始变换
}

// ✅ 手动管理样式状态
class StateManager {
  constructor(ctx) {
    this.ctx = ctx;
    this.currentFillStyle = null;
    this.currentStrokeStyle = null;
  }

  setFillStyle(color) {
    if (this.currentFillStyle !== color) {
      this.ctx.fillStyle = color;
      this.currentFillStyle = color;
    }
  }
}

8.2 绘制优化清单

批量绘制：合并相同状态的绘制操作
路径复用：使用Path2D缓存复杂路径
避免浮点坐标：使用整数坐标减少抗锯齿计算
限制Canvas尺寸：最大1920x1080，使用CSS缩放显示
使用离屏渲染：静态内容预渲染到离屏Canvas
减少API调用：用一个fillRect代替多个单像素fillRect

8.3 内存优化清单

对象池：复用频繁创建的对象
类型化数组：使用Float32Array/Uint8Array存储数值数据
及时释放资源：清理不再使用的Canvas和Image
限制缓存大小：设置缓存上限，使用LRU策略
避免内存泄漏：移除事件监听器，清理定时器

总结

Canvas的高性能表现依赖于对状态机、绘制模型和性能瓶颈的深入理解。状态机采用栈结构管理绘图状态，save/restore机制提供了灵活的状态恢复能力，但需注意避免滥用。Canvas的即时绘制模型决定了每帧都需要重新绘制所有内容，这要求开发者精心设计渲染策略。

核心要点：

状态管理：最小化save/restore调用，手动管理关键状态
绘制模型：理解即时模式特性，采用分层渲染策略
性能瓶颈：识别CPU、GPU、内存三大瓶颈源
优化技术：脏区域检测、对象池、类型化数组、离屏渲染
持续监控：使用DevTools和自定义监控工具追踪性能指标

通过系统掌握Canvas状态机原理、绘制模型特性和性能优化技术，开发者能够构建流畅运行的高性能Canvas应用，充分发挥浏览器图形渲染能力。

Canvas状态机、绘制模型与性能瓶颈