文本绘制
Canvas 2D API 提供了两种绘制文本的方法和一个检查字体宽度的方法
方法变量说明
| 变量名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| text | string | 是 | 待填充文字 |
| x | Number | 是 | 指定左上角位置的X坐标 |
| y | Number | 是 | 指定左上角位置的Y坐标 |
| maxWidth | Number | 否 | 绘制的最大宽度，如果文本没有达到最大宽度大小，按正常显示，如果超过了设置的最大宽度，则会压缩文本宽度到设定值 |
填充文本
填充文本 语法
在指定的位置填充文本，可选绘制的最大宽度
即绘制的文本为实心fillText(text, x, y [, maxWidth])
填充文本 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
//没有配置最大宽度
ctx.fillText("Hello IMooc",10,50);
</script>
</body>
</html>
空心文本
绘制空心文本 语法
在指定的(x,y)位置绘制文本边框，可选绘制的最大宽度
即绘制的文本为空心strokeText(text, x, y [, maxWidth])
绘制空心文本 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
//传入最大宽度
ctx.strokeText("Hello IMooc",10,50, 100);
</script>
</body>
</html>
检查文本宽度
检查文本宽度 语法
此方法返回一个被测量文本 TextMetrics 对象
此对象包含了例如 text文字所占宽度width、文本矩形边界右侧距离等多个属性measureText(text)
检查文本宽度 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c = document.getElementById("imooc");
var ctx = c.getContext("2d");
var txt = "Hello IMooc"
// measureText不会渲染canvas，知识返回了一个包含多个属性的对象
var textMetricsObj = ctx.measureText(txt)
alert(textMetricsObj.width)
</script>
</body>
</html>
文本样式
Canvas 2D API文本绘制提供了四个设置文本样式的属性，我们一个一个来看
字体设置 .font
字体设置 .font 说明
- .font 是 Canvas 2D API 描述绘制文字时，为当前字体样式设置的属性。
- 使用和 CSS font 规范相同的字符串值。
- 默认值: 10px sans-serif
语法
ctx.font = value;
参数说明
| 变量名 | 类型 | 是否必须 | 说明 |
|---|---|---|---|
| value | string | 是 | 符合CSS中font的语法字符串 |
字体设置 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
//设置了字体大小，和字体样式
ctx.font="30px Microsoft YaHei,SimSun,Arial";
ctx.fillText("Hello IMooc",10,50);
</script>
</body>
</html>
对齐设置 .textAlign
对齐设置 .textAlign 说明
- .textAlign 是 Canvas 2D API 提供的设置文本对其方式的属性。
- 默认值: start
特别说明
该对齐方式是针对 .fillText/.strokeText 方法的 X 的值。所以如果 textAlign="center"，那么该文本将画在 x-50%*width的位置
语法
ctx.textAlign = value;
value值说明
value可取如下值
| value | 说明 | 特别说明 |
|---|---|---|
| left | 文本左对齐 | 对齐方式是针对 .fillText/.strokeText 方法的 X 的值 |
| right | 文本右对齐 | 对齐方式是针对 .fillText/.strokeText 方法的 X 的值 |
| center | 文本居中对齐 | 对齐方式是针对 .fillText/.strokeText 方法的 X 的值 |
| start | 文本对齐界线开始的地方,默认左对齐 | 搭配direction属性使用，ltr：从左向右，rtl：从右向左 |
| end | 文本对齐界线结束的地方,默认右对齐 | 搭配direction属性使用，ltr：从左向右，rtl：从右向左. |
补充
- 如果你想让文本在整个canvas居中，只需要将fillText的x值设置成canvas的宽度的一半，.textAlign值设置成center。
- start和stop默认情况下是等同于left和right的。如果设置direction的值为：rtl，则刚好相反
- direction属性还未被纳入标准文档，兼容性很差， 所以针对start和end的使用参照left和right
对齐设置 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
//X的值为175，在画布正中间
ctx.font="30px Microsoft YaHei,SimSun,Arial";
ctx.textAlign="left"
ctx.fillText("Left Imooc",175,50);
ctx.textAlign="center"
ctx.fillText("Center IMooc",175,100);
ctx.textAlign="right"
ctx.fillText("Right IMooc",175,150);
</script>
</body>
</html>
垂直对其设置 .textBaseline
垂直对其设置 .textBaseline 说明
- .textBaseline 是 Canvas 2D API 提供的文本垂直对齐的属性（基线对齐属性）。
- 默认值: alphabetic
语法
ctx.textBaseline = value;
value值说明
value可取如下值
| value | 说明 | 特别说明 |
|---|---|---|
| top | 文本基线在文本块的顶部 | |
| hanging | 文本基线是悬挂基线 | |
| middle | 文本基线在文本块的中间 | |
| alphabetic | 文本基线是标准的字母基线。 | |
| ideographic | 文字基线是表意字基线 | 如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。 |
| bottom | 文本基线在文本块的底部 | 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。 |
补充
- 如果你想让文本在整个canvas居中，只需要将fillText的x值设置成canvas的宽度的一半，.textAlign值设置成center。
- start和stop默认情况下是等同于left和right的。如果设置direction的值为：rtl，则刚好相反
- direction属性还未被纳入标准文档，所以兼容性很差， 不建议使用
字体设置 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<canvas id="imooc" width="550" height="200" style="border:1px solid #f2180d;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
ctx.font="30px Microsoft YaHei,SimSun,Arial";
//设置了不同垂直对齐方式
ctx.textBaseline="top"
ctx.fillText("TOPtop",0,50, 100);
ctx.textBaseline="hanging"
ctx.fillText("HANGING hanging",150,50, 100);
ctx.textBaseline="middle"
ctx.fillText("MIDDLEmiddle",305,50);
</script>
</body>
</html>
文本方向设置 .direction
文本方向设置 .direction 说明
- .textBaseline 是 Canvas 2D API 提供的文本垂直对齐的属性（基线对齐属性）。
- 默认值: inherit
语法
ctx.textBaseline = value;
value值说明
value可取如下值
| value | 说明 | 特别说明 |
|---|---|---|
| ltr | 文本方向从左向右。 | left to right 缩写 |
| rtl | 文本方向从右向左。 | right to left 缩写 |
| inherit | 根据情况继承 canvas 元素或者 Document | 默认从左向右 |
补充
- direction属性还未被纳入标准文档，所以兼容性很差，不建议使用
字体设置 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
</head>
<body>
<canvas id="imooc" width="550" height="200" style="border:1px solid #f2180d;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("imooc");
var ctx=c.getContext("2d");
ctx.font="30px Microsoft YaHei,SimSun,Arial";
//设置了不同垂直对齐方式
ctx.direction = "ltr";
ctx.fillText("Hello IMooc",305,50);
</script>
</body>
</html>