Canvas Design Skill 深度解析：从基础绘制到高性能动画实现

1次阅读

共计 2552 个字符，预计需要花费 7 分钟才能阅读完成。

Canvas 作为浏览器原生绘图 API，被广泛应用于数据可视化、游戏开发、图像编辑器等场景。但许多开发者在实现复杂效果时，常遇到以下问题：

动画卡顿，难以达到 60FPS 的流畅标准
复杂图形导致 CPU 占用率飙升
移动端设备上性能急剧下降
内存泄漏导致页面崩溃

测试环境：Chrome 115, 1920×1080 分辨率

测试代码：

// requestAnimationFrame 实现
function animateRAF() {
  let count = 0;
  const start = performance.now();

  function frame() {
    count++;
    if (count < 100) {requestAnimationFrame(frame);
    } else {console.log(`RAF FPS: ${100000 / (performance.now() - start)}`);
    }
    // 绘制逻辑...
  }
  requestAnimationFrame(frame);
}

// setTimeout 实现
function animateTimeout() {
  let count = 0;
  const start = performance.now();

  function frame() {
    count++;
    if (count < 100) {setTimeout(frame, 16);
    } else {console.log(`Timeout FPS: ${100000 / (performance.now() - start)}`);
    }
    // 绘制逻辑...
  }
  setTimeout(frame, 16);
}

实测数据（100 帧平均值）：
requestAnimationFrame: 58-60 FPS
setTimeout: 45-52 FPS（存在明显波动）

// 创建离屏 Canvas
const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');

// 预渲染复杂图形
offscreenCanvas.width = 200;
offscreenCanvas.height = 200;
offscreenCtx.fillStyle = 'red';
offscreenCtx.beginPath();
offscreenCtx.arc(100, 100, 50, 0, Math.PI * 2);
offscreenCtx.fill();

// 主线程绘制
function render() {ctx.drawImage(offscreenCanvas, x, y);
  requestAnimationFrame(render);
}

// 脏矩形区域记录
let dirtyRects: {x: number, y: number, w: number, h: number}[] = [];

// 标记脏区域
function markDirty(x: number, y: number, w: number, h: number) {dirtyRects.push({x, y, w, h});
}

// 智能重绘
function smartRender() {if (dirtyRects.length === 0) return;

  // 合并重叠区域（优化步骤）const merged = mergeRects(dirtyRects);

  // 只重绘脏区域
  merged.forEach(rect => {ctx.clearRect(rect.x, rect.y, rect.w, rect.h);
    // 仅重绘该区域内的元素...
  });

  dirtyRects = [];
  requestAnimationFrame(smartRender);
}

// worker.ts
self.onmessage = (e) => {const {width, height, data} = e.data;
  // 复杂计算...
  self.postMessage({result: processedData});
};

// 主线程
const worker = new Worker('worker.js');
worker.onmessage = (e) => {
  const imageData = new ImageData(new Uint8ClampedArray(e.data.result),
    canvas.width
  );
  ctx.putImageData(imageData, 0, 0);
};

// 提交任务
worker.postMessage({
  width: canvas.width,
  height: canvas.height,
  data: ctx.getImageData(0, 0, canvas.width, canvas.height).data
});