1. HTML5 canvas 的核心作用与定位
1.1 为什么选择 HTML5 canvas？
在前端开发中，HTML5 canvas 提供了一种直接的像素级绘图接口。通过 2D 渲染上下文，开发者能够以脚本的方式逐像素地绘制形状、文本、图像以及复杂动画。其核心优势在于高自由度和渲染性能，尤其在需要粒子系统、实时数据可视化或自定义 UI 绘制时，canvas 显得尤为合适。
需要注意的是，canvas 本身是一个独立的绘制区域，与 DOM 的布局脱离，它基于位图缓存，不像 SVG 那样保留可访问的 DOM 节点。因此，操作越频繁，CPU/GPU 的工作量越大，需要合理的调度和优化。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');1.2 渲染管线与像素对齐
使用 CanvasRenderingContext2D 提供的绘图指令，浏览器在后台进行栅格化和光栅化，最终输出到屏幕。坐标系统以左上角为原点，单位为像素，容易实现直线、曲线、圆弧等形状的路径。
为了获得清晰的图像，尤其在高 DPI 显示屏上，需要将画布的实际像素尺寸与 CSS 尺寸进行对齐，避免模糊。我们通过调整 devicePixelRatio 来实现高分辨率绘制。
function resizeCanvas() {const ratio = window.devicePixelRatio || 1;const cssW = 800;const cssH = 600;const canvas = document.getElementById('myCanvas');canvas.style.width = cssW + 'px';canvas.style.height = cssH + 'px';canvas.width = Math.round(cssW * ratio);canvas.height = Math.round(cssH * ratio);const ctx = canvas.getContext('2d');ctx.scale(ratio, ratio);
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();2. 常见使用场景
2.1 实时动画与粒子系统
Canvas 具有高效的逐帧绘制能力，结合 requestAnimationFrame，可以实现流畅的实时动画、粒子系统和物理效果。通过逐帧清除区域或整帧重绘，可以构建复杂的动效。
在动画中，合适的绘图策略是把大多数绘制操作放入一个缓冲区域或离屏 canvas，减少主画布上的重绘。了解屏幕更新的时间片，能够避免回流与抖动。
let particles = [];
function loop() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let p of particles) {p.x += p.vx;p.y += p.vy;ctx.beginPath();ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);ctx.fillStyle = p.color;ctx.fill();}requestAnimationFrame(loop);
}
requestAnimationFrame(loop);2.2 数据可视化与图表绘制
Canvas 在绘制自定义图表、热力图、实时监控曲线等方面非常灵活。通过对坐标系的缩放、平移和裁剪，可以实现多轴显示、动态网格和边界渲染。
离屏渲染（Offscreen Canvas）有助于在后台完成复杂图形的预计算，再将结果绘制到主画布，提升页面流畅度。
function drawChart(data) {const barW = 20;ctx.fillStyle = '#4caf50';data.forEach((v, i) => {ctx.fillRect(i * (barW + 4), canvas.height - v, barW, v);});
}
2.3 离屏绘制与图像处理
通过 离屏 canvas，你可以在一个隐藏画布上完成复杂的图像处理任务，如模糊、锐化、颜色映射等，然后一次性合成到主画布。这种做法有助于降低主画面的绘制成本。
离屏技术还支持测试不同的绘制策略，例如分段渲染、渐变区域的缓存，以及图像过滤后的快速复用。
3. 实战要点：绘制流程与 API 使用
3.1 画布初始化与尺寸处理
正确的初始化是确保渲染正确的前提。要点在于设置实际像素尺寸、对齐 CSS 尺寸，以及在不同设备上正确处理 像素比。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
canvas.style.width = '400px';
canvas.style.height = '300px';
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
ctx.scale(dpr, dpr);3.2 基本绘制命令：路径、填充、描边
通过 beginPath、moveTo、lineTo、arc 等 API，可以构建任意形状的图形路径。随后使用 fill、stroke 来填充或描边。
下面的示例演示一个简单的圆与多边形组合绘制过程，展示了如何组合路径、渐变和阴影效果。
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,0,0,0.6)';
ctx.fill();ctx.beginPath();
ctx.moveTo(160, 100);
ctx.lineTo(260, 100);
ctx.lineTo(210, 40);
ctx.closePath();
ctx.fillStyle = '#2e7d32';
ctx.fill();
ctx.strokeStyle = '#1a237e';
ctx.stroke();3.3 变换、裁剪与阴影
通过 translate、rotate、scale 等变换函数，可以实现对象的移动、旋转与缩放，而裁剪功能则允许你限定绘制的区域。
阴影与渐变属性提升了图形美观度。使用 shadowBlur、shadowColor、linearGradient 等属性，可以创建更丰富的视觉效果。
ctx.save();
ctx.translate(120, 80);
ctx.rotate(Math.PI / 6);
ctx.fillStyle = 'orange';
ctx.fillRect(-25, -25, 50, 50);
ctx.restore();const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, '#4fc3f7');
g.addColorStop(1, '#e91e63');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);3.4 性能与渲染优化
在高帧率场景下，保持最小化的绘制区域，以及使用离屏缓存，可以显著降低每帧的像素运算量。
启用 WebGL 作为后端渲染或许能获得更强的渲染能力，尽管 2D Canvas 在大多数 UI 场景下已足够。对于频繁重绘的区域，只绘制需要更新的部分是关键。
4. 与其他技术的对比、调试与运维要点
4.1 与 SVG 的对比
SVG 提供了基于可访问 DOM 的矢量图形，适合文档型图形与响应式缩放，但在复杂动画和大量对象时，Canvas 的像素级绘制性能更佳。
对于静态图形，双方差异不大；在需要频繁重绘和粒子效果时，Canvas 更具优势。
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="red" />
</svg>4.2 与 WebGL 的对比
WebGL 通过 GPU 进行三维和高性能图形渲染。对于复杂着色器、三维场景和大规模粒子系统，WebGL 在性能上具备天然优势。Canvas 2D 与 WebGL 常常作为互补方案。
在简单的图形与 UI 绘制中，Canvas 2D 更易上手，且 API 更直观。开发者需要根据需求权衡易用性与性能。
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {// fallback
}
4.3 调试与性能分析
使用浏览器自带的开发者工具，可以查看绘制调用、GPU 占用、内存情况以及帧率。启动性能分析工具，定位 绘制瓶颈、减少不必要的重绘。
常见调试策略包括：通过 ctx.save、ctx.restore 保持绘制状态、使用离屏缓存、以及在不同设备上测试像素对齐。
let needRedraw = false;
canvas.addEventListener('mousemove', () => { needRedraw = true; });
function tick() {if (needRedraw) {// ... 绘制逻辑needRedraw = false;}requestAnimationFrame(tick);
}
requestAnimationFrame(tick);5. 常见坑与最佳实践
5.1 设备像素比导致的模糊
未对画布做像素比处理，尤其在高 DPI 设备上，容易出现图像模糊。解决方案是按设备像素比来设置画布的实际像素尺寸，并适配 CSS 尺寸。
通过下面的代码片段，实现高分辨率显示的对齐：dpr 缩放与 ctx.scale。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
canvas.style.width = '400px';
canvas.style.height = '300px';
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
ctx.scale(dpr, dpr);5.2 事件驱动与绘图节奏
基于事件驱动的绘制需要在合适的时机触发 redraw。对于交互性较强的场景，利用 requestAnimationFrame 进行节奏控制是最常见的做法。
避免在回调中执行大量计算，将计算与渲染解耦，并在需要时才更新画布区域。
let needRedraw = false;
canvas.addEventListener('mousemove', () => { needRedraw = true; });
function tick() {if (needRedraw) {// ... 绘制逻辑needRedraw = false;}requestAnimationFrame(tick);
}
requestAnimationFrame(tick);5.3 结合离屏与分层绘制
把静态背景、动态前景分成多个画布分层，可以降低每帧 redraw 的成本。离屏 canvas 的缓存再合成至主画布，有助于提升复杂场景的帧率。
