Canvas 是什么？—— 从概念到实战的完全指南

Canvas（画布）是 HTML5 标准中引入的一个革命性元素。

从本质上讲，它是一个位图画布，允许开发者使用 JavaScript 脚本在网页上动态地绘制图形、图像、动画以及进行复杂的视觉渲染。

它不同于 SVG（可缩放矢量图形），后者是基于 XML 的矢量图形，而 Canvas 提供的是一个像素级的、即时模式的绘图 API。

这意味着你通过代码发出的每一条绘图指令都会立即在画布上修改像素，但一旦绘制完成，Canvas 不会保留任何关于所绘制对象的内部模型。

这种特性使其在需要高频重绘的场景（如游戏、数据可视化、图像处理）中性能表现优异，但也意味着你需要自己管理所有图形对象的状态和逻辑。

一、 Canvas 核心概念与基础使用

1. 创建与获取上下文

Canvas 的使用始于在 HTML 中定义一个 <canvas> 标签，并通过 JavaScript 获取其绘图上下文。

<!-- 在HTML中定义画布，width和height属性定义其像素尺寸 -->
<canvas id="myCanvas" width="800" height="600">
    您的浏览器不支持Canvas，请升级或更换浏览器。
</canvas>

// 在JavaScript中获取Canvas元素和2D绘图上下文
const canvas = document.getElementById('myCanvas');
// 获取2D渲染上下文，这是所有绘图操作的入口
const ctx = canvas.getContext('2d');

getContext('2d') 是最常用的上下文类型，用于二维绘图。此外还有 'webgl' 或 'webgl2' 用于3D图形，但这属于更高级的范畴。

2. 坐标系系统

Canvas 的坐标原点 (0, 0) 位于左上角，X轴向右延伸，Y轴向下延伸。所有绘图位置都基于此坐标系。理解这一点对于精确定位图形至关重要。

二、 Canvas 绘图知识体系详解

1. 基本图形绘制

Canvas 提供了绘制基本形状的 API。

矩形是基础中的基础：

// 填充矩形 (fillRect)：绘制一个实心矩形
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(10, 10, 150, 100); // (x, y, width, height)

// 描边矩形 (strokeRect)：绘制一个矩形边框
ctx.strokeStyle = 'blue'; // 设置描边颜色
ctx.lineWidth = 5; // 设置边框宽度
ctx.strokeRect(200, 10, 150, 100);

// 清除矩形区域 (clearRect)：将指定矩形区域变为透明
ctx.clearRect(50, 30, 80, 50);

路径用于绘制更复杂的形状，如直线、多边形、曲线。绘制路径遵循“起笔 -> 描述路径 -> 描边或填充”的流程：

ctx.beginPath(); // 开始一条新路径
ctx.moveTo(50, 200); // 将“画笔”移动到起点，不画线
ctx.lineTo(200, 200); // 画一条直线到(200,200)
ctx.lineTo(125, 100); // 再画一条线
ctx.closePath(); // 将路径的终点和起点连接起来，形成一个三角形

ctx.fillStyle = 'green';
ctx.fill(); // 填充路径内部

// 重新开始一条路径画边框
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(200, 200);
ctx.lineTo(125, 100);
ctx.closePath();
ctx.strokeStyle = 'black';
ctx.stroke();

圆形/圆弧使用 arc 方法：

ctx.beginPath();
// arc(x, y, radius, startAngle, endAngle, anticlockwise)
// 角度使用弧度制，Math.PI 代表180度
ctx.arc(400, 150, 50, 0, Math.PI * 2); // 画一个完整的圆
ctx.fillStyle = 'orange';
ctx.fill();

2. 样式与颜色

Canvas 的样式属性控制图形的外观。

• fillStyle：设置填充颜色或图案。可以是颜色字符串（‘red’, ‘#FF0000’, ‘rgb(255,0,0)’, ‘rgba(255,0,0,0.5)’），也可以是渐变对象或图案对象。
• strokeStyle：设置描边颜色或图案。
• lineWidth：设置描边线条的宽度（单位像素）。
• lineCap：设置线段端点的样式（butt, round, square）。
• lineJoin：设置两条线段连接处的样式（miter, round, bevel）。

渐变可以创建平滑的颜色过渡：

// 创建线性渐变 (createLinearGradient)
const linearGrad = ctx.createLinearGradient(500, 10, 700, 10);
linearGrad.addColorStop(0, 'yellow'); // 起点颜色
linearGrad.addColorStop(0.5, 'cyan'); // 中点颜色
linearGrad.addColorStop(1, 'purple'); // 终点颜色
ctx.fillStyle = linearGrad;
ctx.fillRect(500, 10, 200, 100);

// 创建径向渐变 (createRadialGradient)
const radialGrad = ctx.createRadialGradient(400, 300, 10, 400, 300, 60);
radialGrad.addColorStop(0, 'white');
radialGrad.addColorStop(1, 'blue');
ctx.fillStyle = radialGrad;
ctx.fillRect(350, 250, 100, 100);

3. 文本绘制

Canvas 也可以绘制文本，虽然不如 CSS 灵活，但足以满足基本需求。

ctx.font = 'bold 48px Arial'; // 设置字体，语法同CSS font属性
ctx.fillStyle = 'navy';
ctx.textAlign = 'center'; // 文本对齐方式：left, center, right
ctx.textBaseline = 'middle'; // 文本基线：top, middle, bottom
ctx.fillText('Hello Canvas!', canvas.width/2, 400); // 绘制填充文本

ctx.strokeStyle = 'darkred';
ctx.lineWidth = 2;
ctx.strokeText('Stroke Text', canvas.width/2, 460); // 绘制描边文本

4. 图像绘制与操作

绘制图像是游戏和UI中不可或缺的功能。

const img = new Image();
img.src = 'path/to/your/image.png';
img.onload = function() { // 必须等待图片加载完成
    // 基础绘制：drawImage(image, dx, dy)
    ctx.drawImage(img, 10, 500);

    // 缩放绘制：drawImage(image, dx, dy, dWidth, dHeight)
    ctx.drawImage(img, 200, 500, 100, 50); // 缩放到100x50

    // 切片绘制：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
    // 从原图(sx,sy)处截取sWidth*sHeight区域，绘制到画布(dx,dy)处，缩放至dWidth*dHeight
    ctx.drawImage(img, 50, 50, 70, 70, 350, 500, 100, 100);
};

5. 变形与状态管理

Canvas 的变形（变换）功能允许你对整个坐标系进行操作，从而实现图形的平移、旋转、缩放。

重要方法：

• translate(x, y)：移动画布原点。后续所有绘图坐标都相对于新原点。
• rotate(angle)：以当前原点为中心旋转画布。
• scale(sx, sy)：缩放画布。大于1放大，0到1之间缩小。

关键技巧：变形操作是累积的，且会影响之后的所有绘制。为了管理这种状态，Canvas 提供了 save() 和 restore() 方法。

• save()：将当前的绘图状态（包括变形矩阵、样式属性、裁剪路径等）压入栈中保存。
• restore()：弹出栈顶状态，并恢复所有设置。

ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, 50, 50); // 在(0,0)处画一个方块

ctx.save(); // 保存当前状态（原点在左上角，无旋转缩放）
ctx.translate(100, 100); // 将原点移动到(100,100)
ctx.rotate(Math.PI / 4); // 旋转45度
ctx.scale(1.5, 1.5); // 放大1.5倍
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, 50, 50); // 在新的坐标系下，原点在(100,100)处画方块
ctx.restore(); // 恢复到save时的状态（原点回到左上角，无旋转缩放）

// 现在又可以基于原始坐标系绘图了
ctx.fillStyle = 'pink';
ctx.fillRect(200, 0, 50, 50);

这个机制对于绘制复杂场景、UI组件或游戏角色至关重要，可以避免变形状态的混乱。

6. 合成与裁剪

• globalAlpha：设置全局透明度。
• globalCompositeOperation：设置新绘制的图形与已有图形的合成方式。例如 ‘source-over’（默认，新图形在上）、‘destination-over’（新图形在下）、‘lighter’（颜色相加）、‘xor’（重叠部分透明）等，可以实现丰富的混合效果。
• 裁剪路径 (clip())：将当前路径定义为裁剪区域，之后的所有绘制都只会在这个区域内显示。

  ctx.beginPath();
  ctx.arc(600, 400, 60, 0, Math.PI * 2);
  ctx.clip(); // 将圆形路径设为裁剪区域
  
  // 绘制一张大图，但只会显示在圆形区域内
  ctx.drawImage(someLargeImage, 540, 340, 120, 120);
  

三、 Canvas 动画与交互实现

Canvas 本身是静态的，动画效果需要通过连续的重绘来实现，这通常结合 requestAnimationFrame 方法。

1. 动画循环

requestAnimationFrame 是浏览器为动画优化的API，它会在下一次浏览器重绘之前调用指定的回调函数，频率通常为60fps。

let x = 0;
function drawFrame() {
    // 1. 清除画布（或使用clearRect清除部分区域）
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 2. 更新动画状态
    x += 2;
    if (x > canvas.width) x = 0;

    // 3. 基于新状态绘制图形
    ctx.fillStyle = 'red';
    ctx.fillRect(x, 100, 50, 50);

    // 4. 请求下一帧，形成循环
    requestAnimationFrame(drawFrame);
}
// 启动动画
drawFrame();

2. 用户交互

Canvas 是一个位图，无法像DOM元素那样直接监听其内部图形的点击事件。实现交互需要手动进行坐标检测。

canvas.addEventListener('click', function(event) {
    // 获取鼠标在Canvas上的坐标
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;

    // 假设我们有一个在 (ballX, ballY) 位置，半径为 ballR 的球
    const distance = Math.sqrt((mouseX - ballX) ** 2 + (mouseY - ballY) ** 2);
    if (distance < ballR) {
        console.log('球被点击了！');
        // 触发相应的游戏逻辑
    }
});

对于复杂的交互，可能需要维护一个所有可交互对象的列表，并在每次事件触发时遍历检测。

四、 性能优化与高级技巧

1. 避免频繁的状态改变：在绘制大量相似图形时，应批量设置样式（如颜色），而不是在每个图形绘制前后都设置一次。
2. 使用离屏Canvas进行预渲染：对于需要重复绘制的复杂静态图形或背景，可以先将它们绘制到一个离屏的Canvas上，然后在主循环中仅用一次drawImage绘制这个离屏Canvas。这能显著减少绘图指令。

   const offScreenCanvas = document.createElement('canvas');
   const offScreenCtx = offScreenCanvas.getContext('2d');
   // ... 在offScreenCanvas上进行复杂的绘制 ...
   // 在主循环中
   ctx.drawImage(offScreenCanvas, 0, 0);
   

3. 分层渲染：创建多个重叠的Canvas元素。将背景、静态元素、动态元素、UI分别绘制在不同的层上。这样，只需要重绘变化频繁的层（如游戏角色层），而不需要重绘静态背景层。
4. 脏矩形渲染：并非每一帧都全屏重绘。只重绘内容发生变化的矩形区域。这要求精确跟踪每个运动物体的边界变化区域。

五、 应用场景

• 游戏开发：2D网页游戏、互动广告游戏。
• 数据可视化：绘制动态图表、地图、关系图。
• 图像处理：在线图片编辑器、滤镜应用。
• 创意艺术：数字绘画板、生成艺术。
• 教育与演示：物理模拟、算法可视化。

Canvas 是一个强大而灵活的工具，它将像素级的绘图控制权完全交给了 JavaScript。掌握其核心API、理解状态管理和坐标系变换、并学会运用动画循环，是解锁其潜力的关键。从简单的图形绘制到复杂的交互式应用，Canvas 为Web前端开发者打开了一扇通往丰富视觉体验的大门。

---

参考来源

• HTML5 Canvas绘制图形从入门到精通
• Android编程入门教程，从零基础入门到精通，看这一篇就够了（2023年最新版）
• openlayers 入门教程（十五）：与 canvas、echart，turf 等交互
• Canvas从入门到精通 - 系统学习Canvas 技术
• Canvas详解
• Canvas从入门到精通 - 系统化学习Canvas绘图技术