引言
本文缘起自笔者开发一个基于 PIXI.js 的在线动画编辑器时，想系统学习 Canvas 相关知识，却发现缺少合适的中文入门资料，于是萌生了撰写这份“速通指北”的想法，欢迎感兴趣的朋友订阅我的 《Canvas 指北》专栏。
第7章：曲线
在进入具体的曲线绘制方法之前，我们先理清一个关键概念：弧线（Arc） 和 曲线（Curve） 在 Canvas 中并不是同一回事。
在 Canvas 中，弧线使用 arc 和 arcTo 绘制，而曲线则使用 quadraticCurveTo（二次贝塞尔）和 bezierCurveTo（三次贝塞尔）。理解了这一点，我们就能更准确地选择工具来绘制想要的图形。
7.1 二次贝塞尔曲线：quadraticCurveTo
二次贝塞尔曲线由一个控制点定义，其数学本质是一段抛物线弧。虽然抛物线通常有对称轴，但在画布上，随着控制点位置的变化，抛物线弧可以朝向任意方向，看起来可能并不对称。
quadraticCurveTo(cpx, cpy, x, y)
-
(cpx, cpy)：控制点坐标
-
(x, y)：终点坐标
-
起点 需通过 moveTo 事先指定。
下面的代码在同一个画布上绘制三条二次贝塞尔曲线，起点均为 (30,100)，终点均为 (270,100)，但控制点的高度不同。你可以清楚地看到控制点越靠上，曲线被“拉”得越高。
<canvas id="quadraticDemo" width="320" height="200" style="border:1px solid #ccc"></canvas>
<script>
const canvas = document.getElementById('quadraticDemo');
const ctx = canvas.getContext('2d');
// 第一条：控制点在 (150, 30) —— 向上拉
ctx.beginPath();
ctx.moveTo(30, 100);
ctx.quadraticCurveTo(150, 30, 270, 100);
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.stroke();
// 第二条：控制点在 (150, 100) —— 与起点终点同高，变成直线
ctx.beginPath();
ctx.moveTo(30, 100);
ctx.quadraticCurveTo(150, 100, 270, 100);
ctx.strokeStyle = 'green';
ctx.stroke();
// 第三条：控制点在 (150, 170) —— 向下拉
ctx.beginPath();
ctx.moveTo(30, 100);
ctx.quadraticCurveTo(150, 170, 270, 100);
ctx.strokeStyle = 'blue';
ctx.stroke();
</script>
效果：红线上拱，绿线平直，蓝线下凹。控制点的 y 坐标直接决定了曲线的弯曲方向。
7.2 三次贝塞尔曲线：bezierCurveTo
三次贝塞尔曲线有两个控制点，能塑造出 S 形、波浪等更复杂的形状。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
-
(cp1x, cp1y)：第一个控制点（影响曲线起始段的走向）
-
(cp2x, cp2y)：第二个控制点（影响曲线结束段的走向）
-
(x, y) ：终点坐标
-
起点 同样由 moveTo 指定。
以下代码从 (50,100) 到 (250,100) 绘制一条三次贝塞尔曲线。第一个控制点 (100,20) 将曲线拉向上方，第二个控制点 (200,180) 将曲线拉向下方，形成优美的 S 形。
<canvas id="bezierDemo" width="320" height="200" style="border:1px solid #ccc"></canvas>
<script>
const canvas = document.getElementById('bezierDemo');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(100, 20, 200, 180, 250, 100);
ctx.strokeStyle = 'purple';
ctx.lineWidth = 3;
ctx.stroke();
</script>
理论上通过贝塞尔曲线，你可以绘制出任何图形。如果你对控制点如何影响曲线仍感到抽象，强烈推荐 cubic-bezier.com/ 这个网站。
第8章：文本
Canvas 不仅可以绘制图形，还能直接渲染文本。本章将介绍如何控制文本的字体、位置、对齐方式，以及如何测量文本尺寸，为你在画布上添加文字标签、设计动态文本效果打下基础。
8.1 文本绘制基础
Canvas 提供了两种绘制文本的方法：
-
fillText(text, x, y, maxWidth)：在指定位置绘制实心字符。
-
strokeText(text, x, y, maxWidth)：在指定位置绘制空心（仅描边）字符。
x 和 y 是文本绘制的起始坐标（具体位置受 textAlign 和 textBaseline 影响，后文会讲）。可选的 maxWidth 参数用于限制文本的最大宽度。
<canvas id="textBasic" width="400" height="150" style="border:1px solid #ccc"></canvas>
<script>
const canvas = document.getElementById('textBasic');
const ctx = canvas.getContext('2d');
// 填充文本
ctx.font = '20px Arial';
ctx.fillStyle = 'blue';
ctx.fillText('实心文本', 50, 50);
// 描边文本
ctx.font = '20px Arial';
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.strokeText('空心文本', 50, 100);
</script>
这里 font 属性与 CSS 的 font 简写语法一致，用于设置文本的字体大小、字体系列等。默认值为 "10px sans-serif"。
8.2 文本布局
8.2.1 水平对齐：textAlign
textAlign 属性决定文本在水平方向上相对于绘图点的对齐方式。可选值：
为了直观理解，我们可以绘制一个参考点，然后分别用不同对齐方式绘制文本，观察它们相对于该点的位置。
<canvas id="textAlignDemo" width="400" height="200" style="border:1px solid #ccc"></canvas>
<script>
const canvas = document.getElementById('textAlignDemo');
const ctx = canvas.getContext('2d');
// 绘制参考竖线（x = 200）
ctx.beginPath();
ctx.strokeStyle = 'gray';
ctx.setLineDash([5, 5]);
ctx.moveTo(200, 0);
ctx.lineTo(200, 200);
ctx.stroke();
ctx.setLineDash([]); // 恢复实线
ctx.font = '16px Arial';
ctx.fillStyle = 'black';
ctx.textBaseline = 'middle'; // 让文本垂直居中，便于观察水平对齐
// 在 x=200 处用不同 textAlign 绘制文本
ctx.textAlign = 'start';
ctx.fillText('start', 200, 30);
ctx.textAlign = 'center';
ctx.fillText('center', 200, 70);
ctx.textAlign = 'end';
ctx.fillText('end', 200, 110);
ctx.textAlign = 'left';
ctx.fillText('left', 200, 150);
ctx.textAlign = 'right';
ctx.fillText('right', 200, 190);
</script>
8.2.2 垂直对齐：textBaseline
textBaseline 属性控制文本在垂直方向上相对于绘图点的对齐方式。可选值：
-
top：文本的顶部（em 方格的上沿）对齐到 y 坐标。
-
hanging：悬挂基线（某些印度字体使用），通常比 top 稍低。
-
middle：文本的中间对齐到 y 坐标。
-
alphabetic（默认）：字母基线（拉丁字母的底部，如 a、x 的下沿）。
-
ideographic：表意文字基线（汉字、日文字符的底部），通常比 alphabetic 稍低。
-
bottom：文本的底部（em 方格的下沿）对齐到 y 坐标。
同样，我们可以绘制一条参考横线，观察不同基线相对于该线的位置。
<canvas id="baselineDemo" width="500" height="250" style="border:1px solid #ccc"></canvas>
<script>
const canvas = document.getElementById('baselineDemo');
const ctx = canvas.getContext('2d');
// 绘制参考横线（y = 120）
ctx.beginPath();
ctx.strokeStyle = 'gray';
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 120);
ctx.lineTo(500, 120);
ctx.stroke();
ctx.setLineDash([]);
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
// 绘制不同 baseline 的文本，y 坐标统一为 120
ctx.textBaseline = 'top';
ctx.fillText('top', 30, 120);
ctx.textBaseline = 'hanging';
ctx.fillText('hanging', 120, 120);
ctx.textBaseline = 'middle';
ctx.fillText('middle', 240, 120);
ctx.textBaseline = 'alphabetic';
ctx.fillText('alphabetic', 350, 120);
ctx.textBaseline = 'ideographic';
ctx.fillText('ideographic', 30, 200);
ctx.textBaseline = 'bottom';
ctx.fillText('bottom', 180, 200);
</script>
8.2.3 文本方向：direction
direction 属性设置文本的方向，影响 start 和 end 的对齐行为。可选值：
通常用于多语言混合场景。下面简单示例：
ctx.direction = 'rtl';
ctx.textAlign = 'start';
ctx.fillText('نص عربي', 200, 50); // 阿拉伯语文本，从右向左显示
8.3 限制文本宽度：maxWidth 参数
fillText 和 strokeText都支持可选的第四个参数 maxWidth。当文本的原始宽度超过 maxWidth 时，浏览器会水平压缩字体（而不是截断或换行）以适应指定宽度。
<canvas id="maxWidthDemo" width="400" height="150" style="border:1px solid #ccc"></canvas>
<script>
const canvas = document.getElementById('maxWidthDemo');
const ctx = canvas.getContext('2d');
ctx.font = '24px Arial';
ctx.fillStyle = 'blue';
// 无限制
ctx.fillText('无限制文本', 20, 40);
// 限制宽度为 100px
ctx.fillText('压缩文本', 20, 90, 100);
</script>
8.4 文本度量：measureText()
measureText(text) 方法返回一个 TextMetrics 对象，包含指定文本在当前字体下的尺寸信息。最常用的属性是 width（文本的宽度，单位像素）。
<canvas id="measureDemo" width="400" height="150" style="border:1px solid #ccc"></canvas>
<script>
const canvas = document.getElementById('measureDemo');
const ctx = canvas.getContext('2d');
ctx.font = '24px Arial';
const text = 'Hello Canvas';
const metrics = ctx.measureText(text);
// 在画布中央绘制文本
const x = (canvas.width - metrics.width) / 2;
const y = 80;
ctx.fillStyle = 'black';
ctx.fillText(text, x, y);
// 绘制一个矩形框表示文本宽度
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.strokeRect(x, y - 24, metrics.width, 24); // 粗略框选，基线为 alphabetic
</script>
第9章：图片
Canvas 不仅能绘制图形和文字，还能直接操作图片。本章将介绍如何在画布上绘制图片、用图片填充形状，以及如何通过裁剪实现有趣的视觉效果。
在 Canvas 中绘制图片，首先需要有一个图片源。通常我们使用 JavaScript 的 Image 对象来加载图片。
<canvas id="canvas1" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://via.placeholder.com/150'; // 示例图片
img.onload = () => {
ctx.drawImage(img, 50, 50);
};
</script>
关键点： 一定要在图片的 load 事件之后调用 drawImage，否则画布上不会有任何内容。
最简单的 drawImage 用法是传入图片对象以及目标坐标 (x, y)，图片会按照原始尺寸绘制。
9.2 drawImage 的三种形式
drawImage 方法有三种调用形式，可以满足不同的绘制需求。下面我们用一个完整的示例来对比展示这三种形式。
基础绘制：drawImage(img, x, y) —— 图片保持原始尺寸。
缩放绘制：drawImage(img, x, y, width, height) —— 图片缩放到指定尺寸。
裁剪+缩放绘制：drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) —— 从源图片中裁剪一块区域，再绘制到画布上并缩放。
示例：在同一个画布上，分别用三种方式绘制同一张图片:
<canvas id="compareCanvas" width="600" height="400" style="border:1px solid #ccc"></canvas>
<script>
const canvas = document.getElementById('compareCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://picsum.photos/200'; // 一张 200x150 的示例图
img.onload = () => {
// 1. 基础绘制（原始尺寸）
ctx.drawImage(img, 30, 30);
ctx.fillStyle = 'black';
ctx.font = '12px sans-serif';
ctx.fillText('基础绘制 (原始尺寸)', 30, 20);
// 2. 缩放绘制（宽120，高90）
ctx.drawImage(img, 250, 30, 120, 90);
ctx.fillText('缩放绘制 (120x90)', 250, 20);
// 3. 裁剪+缩放绘制：从原图 (50,30) 位置裁剪 100x80 区域，绘制到 (400,30) 处并缩放到 150x120
ctx.drawImage(img, 50, 30, 100, 80, 400, 30, 150, 120);
ctx.fillText('裁剪+缩放', 400, 20);
};
</script>
9.3 用图片填充形状：createPattern
createPattern 方法可以基于图片创建一个平铺图案（类似于 CSS 的 background-repeat），然后将这个图案赋值给 fillStyle，之后绘制的所有形状（矩形、圆形、任意路径）都会用该图片平铺填充。
const pattern = ctx.createPattern(img, repetition);
-
repetition 取值："repeat"（默认，双向平铺）、"repeat-x"（水平平铺）、"repeat-y"（垂直平铺）、"no-repeat"（不平铺）。
<canvas id="patternCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('patternCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://picsum.photos/30/30';
img.onload = () => {
const pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
// 填充矩形
ctx.fillRect(20, 20, 150, 100);
// 填充圆形
ctx.beginPath();
ctx.arc(280, 80, 50, 0, Math.PI * 2);
ctx.fill();
};
</script>
9.4 图片与文字结合：图案文字
同样的技巧也可以用在文字上：将图案赋值给 fillStyle，然后使用 fillText 绘制文字，文字内部就会显示图片平铺效果，形成纹理字。
<canvas id="textureTextCanvas" width="400" height="150"></canvas>
<script>
const canvas = document.getElementById('textureTextCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://picsum.photos/100';
img.onload = () => {
const pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.font = 'bold 60px Arial';
ctx.fillText('纹理', 50, 100);
};
</script>
9.5 图片与形状结合：裁剪（clip）入门
clip()方法是 Canvas 中一个非常实用的功能：它基于当前路径设置一个裁剪区域，之后所有绘制的内容只显示在该区域内部。超出部分会被隐藏。
使用方法：
先用 beginPath 和绘图命令（如矩形、圆形、任意路径）定义一个路径。
调用 clip()，将当前路径设置为裁剪区域。
执行绘制（图片、图形、文字等），它们只会出现在裁剪区域内。
通常配合 save() 和 restore() 使用，避免裁剪影响后续绘制。
示例：将图片裁剪成圆形头像
<canvas id="clipCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('clipCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://via.placeholder.com/200/ff9900/ffffff?text=头像';
img.onload = () => {
ctx.save(); // 保存当前状态（无裁剪）
// 绘制圆形路径
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.clip(); // 设置裁剪区域为圆形内部
// 绘制图片，图片只会在圆形区域内显示
ctx.drawImage(img, 20, 20, 160, 160);
ctx.restore(); // 恢复状态，移除裁剪区域
// 绘制一个边框参考
ctx.strokeStyle = 'gray';
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.stroke();
};
</script>
🚀下篇预告：高级操作与动画篇
在下一篇中，你将学到：
- 坐标变换（平移、旋转、缩放）的灵活运用，轻松实现复杂的图形变换；
- 像素级操作：读取、修改像素数据，打造自定义滤镜和图像特效；
- 绘图状态的管理与保存，高效切换样式；
- 动画循环的实现原理，结合性能优化技巧，打造流畅的交互式动画；
- 更多实用技巧，助你独立开发完整的动画和图像应用。
学完本篇，你将真正掌握 Canvas 的高级玩法，开启创意编程的大门。
登录
