水车_ ·空心文本绘制
1. 前言
上一节我们学习了利用 fillText 绘制一行有填充的文本，既然有填充的文本，那也就有只有描边的文字，也就是空心文本，本小节我们就学习利用 strokeText 方法绘制一行空心文本。
2. 空心文本
在 canvas 的 API 中已经封装了绘制空心文本的方法：strokeText。
先看一个案例：
实例演示
预览
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
<script>
const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
ctx.font="40px Microsoft YaHei"
ctx.strokeText("慕课Wiki", 40, 40) //绘制文本
</script>
<body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果
运行结果：
上面我们就绘制了一行空心文本。
3. 方法整理
本小节中我们使用到一个新的方法，strokeText，它的使用和 fillText 完全相同。
3.1 strokeText()方法
strokeText 方法作用是绘制一行空心文字。
语法：
void ctx.strokeText(text, x, y [, maxWidth]);
变量说明：
| 变量名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| text | String | 是 | 要绘制的文本。 |
| x | Number | 是 | 文本起始点的 x 轴坐标。 |
| y | Number | 是 | 文本起始点的 y 轴坐标。 |
| maxWidth | Number | 是 | 可选，需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体或者小号的字体。 |
4. 总结
本小节我们主要学习了第二种绘制文本的方法：strokeText ，canvas 也只有这两种绘制文本的方法。绘制文本时有一个注意事项：这两种绘制文本方法都只能绘制单行文本，目前 canvas 不支持绘制多行文本。
2024 imooc.com All Rights Reserved |