Canvas 是 HTML5 提供的位图绘图表面，JavaScript 通过 CanvasRenderingContext2D 在画布上直接绘制像素。与 SVG 的保留模式不同，Canvas 是立即模式：绘图命令执行后只留下像素，图形对象本身不会保留在 DOM 中。

基本流程

const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#eee';
ctx.fillRect(0, 0, canvas.width, canvas.height);
  1. 获取 2D context。
  2. 设置坐标、样式与变换。
  3. 用路径 API 描述形状。
  4. 调用 stroke() 或 fill() 提交绘制。

常用 API

  • 路径：beginPath、moveTo、lineTo、arc、rect、quadraticCurveTo、bezierCurveTo、closePath
  • 样式：fillStyle、strokeStyle、lineWidth、lineCap、lineJoin
  • 变换：translate、rotate、scale、transform、save、restore
  • 图像：drawImage、createImageData、getImageData、putImageData
  • 动画：配合 requestAnimationFrame 逐帧重绘

贝塞尔曲线

Canvas 原生支持二次与三次贝塞尔曲线：

ctx.beginPath();
ctx.moveTo(30, 150);
ctx.bezierCurveTo(70, 30, 230, 270, 270, 150);
ctx.stroke();

曲线参数与控制点含义见 贝塞尔曲线。

与矢量图

Canvas 输出的是位图，不能像 SVG 那样缩放后保持清晰；矢量图则需要在显示前栅格化。实际项目中常用 SVG 保存可编辑的矢量数据，用 Canvas 做高性能即时渲染。相关笔记：矢量图。

常见应用

  • 图表与编辑器画布。
  • 2D 游戏与粒子效果。
  • 图像处理与滤镜。
  • 数据可视化。

注意事项

  • 高 DPI 屏幕需要把 canvas.width / canvas.height 设为物理像素，再用 CSS 尺寸显示。
  • getImageData 存在跨域限制，需要服务端配置 CORS。
  • 大尺寸画布会占用较多内存。

参考资料

本文归档于个人知识库 · 领域：CS & AI · 模块：04 Project_CS_AI/Frontend