-
未登录
热门文章
canvas 中不光是绘制一些图案，有时候我们还需要对文字进行绘制，本小节我们就学习 canvas 中如何绘制文本。
在 canvas 的 API 中已经封装了绘制文本的方法：fillText，我们可以直接调用使用。
先看一个案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xx网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.fillText("xxWiki", 20, 20) //绘制文本 </script>
<body>
</html>
运行结果：
上面我们就绘制了一行文本，但是我们可以发现，这个字很小，如果我们想自定义字体样式，那就需要用到设置字体属性：font 了，在 canvas 中使用 font 和 CSS font 规范相同。
看一个案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xx网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.fillStyle = "#456795" ctx.font="60px Microsoft YaHei" //设置字体样式 ctx.fillText("xxWiki", 20, 100) //绘制文本 </script>
<body>
</html>
运行结果：
这样我们就绘制了 60px 的微软雅黑文字。
本小节中我们使用到一个新的方法，fillText。
fillText 方法作用是绘制一行文字。
语法：
void ctx.fillText(text, x, y [, maxWidth]);
变量说明
| 变量名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| text | String | 是 | 要绘制的文本。 |
| x | Number | 是 | 文本起始点的 x 轴坐标。 |
| y | Number | 是 | 文本起始点的 y 轴坐标。 |
| maxWidth | Number | 是 | 可选，需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体或者小号的字体。 |
本小节中我们使用到一个新的属性，它就是 font，此属性和 CSS 的 font 属性值相同。
font 属性作用是设置绘制文本的样式。
变量说明：
| 属性名 | 类型 | 说明 |
|---|---|---|
| font | String | 符合 CSS font 语法的字符串，默认字体是 10px sans-serif。 |
本小节我们主要学习了利用 fillText 方法绘制一行文本，利用 font 设置绘制文本的样式。下一小节我们将学习如何绘制空心文本。