对于文本操作，canvas提供了不少方法和属性
文本操作“方法”
| 方法 | 说明 |
|---|---|
| fillText() | 绘制“填充”文本 |
| strokeText() | 绘制“描边”文本 |
| measureText() | 用于获取文本的长度（不能绘制文本，只能获取长度） |
文本操作“属性”
| 属性 | 说明 |
|---|---|
| font | 定义文本字体样式（大小、粗细等） |
| textAlign | 定义文本水平对齐方式 |
| textBaseline | 定义文本水平垂直方式 |
| fillStyle | 定义画笔“填充”路径的颜色 |
| strokeStyle | 定义画笔“描边”路径的颜色 |
strokeText()方法
语法：
strokeText(text , x , y , maxWidth)
参数text是一个字符串文本，参数x表示文本最左边的坐标，参数y表示文本最下边的坐标，参数maxWidth可选，表示允许的最大文本宽度（单位px），如果文本超出maxWidth，文本会压缩至maxWidth
fillText()方法
语法：
fillText(text , x , y , maxWidth)
参数text是一个字符串文本，参数x表示文本最左边的坐标，参数y表示文本最下边的坐标，参数maxWidth可选，表示允许的最大文本宽度（单位px），如果文本超出maxWidth，文本会压缩至maxWidth
measureText()方法
语法：
let length = cxt.measureText(text).width
参数text是一个字符串文本，measureText().width返回文本的长度，单位px。（measureText()方法返回一个对象，且这个对象只有一个width属性）
预备代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id = "canvas" width = "300" height = "300" style = "border: 1px dashed gray;"></canvas>
</body>
<script>
window.onload = function() {
//写逻辑
}
</script>
</html>
效果图如下：
let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');
let text = "笨笨狗吞噬者";
cxt.font = "bold 20px 楷体";
let len = cxt.measureText(text).width;
let width = canvas.width;
let x = width / 2 - len / 2; // 实现水平居中
cxt.strokeStyle = "red";
cxt.strokeText(text,x,100);
cxt.fillStyle = "yellow";
cxt.fillText(text,x,100);
效果图如下：
font属性
HTML5 canvas font 属性 (w3school.com.cn)
textAlign属性
HTML canvas textAlign 属性 (w3school.com.cn)
textBaseline属性
HTML canvas textBaseline 属性 (w3school.com.cn)
封面制作网站 ColorFu
文章内容参考莫振杰 著《HTML5 CANVAS开发详解》，感兴趣的同学可以阅读一下这本书，如有错误，欢迎指正！！
