Canvas学习笔记 | 文本操作
简介
在Canvas中，文本操作的常用方法有：
方法 | 说明 |
fillText() | 绘制实心文本 |
strokeText() | 绘制空心文本 |
measureText() | 获取文本长度 |
在Canvas中，文本操作的常用属性有：
方法 | 说明 |
font | 定义文本字体样式 |
textAlign | 定义文本水平对齐方式 |
textBaseline | 定义文本垂直对齐方式 |
fillStyle | 定义实心文本颜色 |
stokeStyle | 定义空心文本颜色 |
strokeText()方法
在Canvas中，我们使用strokeText()绘制空心文本。
语法：
ctx.strokeText(text, x, y, maxWidth);说明：
参数说明：
- 参数text表示想要绘制的文本字符串；
- 参数x表示文本的横坐标；
- 参数y表示文本的纵坐标，是文本最下边的坐标；
- 参数maxWidth为可选参数，表示文本的最大宽度（单位为像素）。如果文本长度超出maxWidth的值，会将文本压缩至maxWidth。
示例：strokeText()方法示例
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>strokeText()方法示例</title>
</head>
<body>
<canvas id="canvas" width="400" height="200"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
var text = "嗨皮汪小成";
ctx.font = "bold 30px 微软雅黑";
ctx.strokeStyle = "red";
ctx.strokeText(text, 50, 50);
};
</script>
</body>
</html>效果图：
fillText()方法
在Canvas中，我们使用fillText()方法绘制实心文本。
语法：
ctx.fillText(text, x, y, maxWidth);说明：
参数说明：
- 参数text表示想要绘制的文本字符串；
- 参数x表示文本的横坐标；
- 参数y表示文本的纵坐标，是文本最下边的坐标；
- 参数maxWidth为可选参数，表示文本的最大宽度（单位为像素）。如果文本长度超出maxWidth的值，会将文本压缩至maxWidth。
示例：fillText()方法示例
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>fillText方法示例</title>
</head>
<body>
<canvas id="canvas" width="400" height="200"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var text = "嗨皮汪小成";
ctx.font = "bold 30px 微软雅黑";
ctx.fillStyle = "red";
ctx.fillText(text, 50, 50);
};
</script>
</body>
</html>效果图：
measureText()方法
在Canvas中，我们可以使用measureText()方法获取一个文本的长度。measureText()方法返回一个对象，这个对象只有一个width属性，width属性的值即为文本的长度。
语法：
var length = ctx.measureText(text).width;说明：
参数text表示一个字符串，measureText()方法返回对象的width属性即为这个字符串的长度。
示例：使用measureText()方法使文本水平居中
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>使用measureText()方法使文本水平居中</title>
</head>
<body>
<canvas id="canvas" width="400" height="200"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var text = '嗨皮汪小成@掘金';
ctx.font = '20px bold';
var textWidth = ctx.measureText(text).width;
var xPosition = size / 2 - textWidth / 2;
ctx.fillStyle = 'red';
ctx.fillText(text, xPosition, 80);
};
</script>
</body>
</html>效果图：
font属性
在Canvas中，我们使用font属性定义文本的字体样式。context.font的用法与CSS中font属性的用法是一样的。
语法：
ctx.font = "font-style font-weight font-size/line-height font-family"说明：
font属性的默认是10px sans-serif。定义font属性后，后面的文本会一直延用这些font属性值，直至font属性被重新定义成其它属性值。
因在前面的示例中已经用到了font属性值，这里不再单独编写示例程序。
textAlign属性
在Canvas中，我们使用textAlign属性定义文本水平方向的对齐方式。
语法：
ctx.textAlign = "属性值";说明：
textAlign属性取值如下表：
属性值 | 说明 |
start | 文本在指定的横坐标开始 |
end | 文本在指定的横坐标结束 |
left | 文本左对齐 |
right | 文本右对齐 |
center | 文本的中心被放置在指定的横坐标处 |
示例：textAlign属性示例
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>textAlign属性示例</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 在横坐标150处画一条基准线
ctx.moveTo(150, 0);
ctx.lineTo(150, 400);
ctx.strokeStyle = 'hotpink';
ctx.stroke();
ctx.font = '12px bold';
ctx.textAlign = 'start';
ctx.fillText('textAlign取值为start', 150, 50);
ctx.textAlign = 'end';
ctx.fillText('textAlign取值为end', 150, 100);
ctx.textAlign = 'left';
ctx.fillText('textAlign取值为left', 150, 150);
ctx.textAlign = 'right';
ctx.fillText('textAlign取值为right', 150, 200);
ctx.textAlign = 'center';
ctx.fillText('textAlign取值为center', 150, 250);
};
</script>
</body>
</html>效果图：
textBaseline属性
在Canvas中，我们使用textBaseline属性定义文本垂直方向的对齐方式。
语法：
ctx.textBaseline = "属性值";说明：
textBaseline属性取值如下表：
属性值 | 说明 |
alphabetic | 文本基线是普通英文字母的基线 |
top | 文本基线是em方框的顶端 |
middle | 文本基线是em方框的中心 |
bottom | 文本基线是em方框的底端 |
示例：textBaseline属性示例
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>textBaseline属性示例</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"
style="border: 1px dashed #333333" ></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = '12px bold';
// 在纵坐标200处画一条基准线
ctx.moveTo(0, 200);
ctx.lineTo(400, 200);
ctx.strokeStyle = 'hotpink';
ctx.stroke();
ctx.font = '12px bold';
ctx.textBaseline = 'alphabetic';
ctx.fillText('alphabetic', 50, 200);
ctx.textBaseline = 'top';
ctx.fillText('top', 130, 200);
ctx.textBaseline = 'middle';
ctx.fillText('middle', 210, 200);
ctx.textBaseline = 'bottom';
ctx.fillText('bottom', 290, 200);
};
</script>
</body>
</html>效果图：