前言
课件地址
课堂目标
1.理解文本的属性和绘制方法。
2.可以灵活熟练的绘制文本。
知识点
- 文本的属性
- 文本的绘制方法
1-文本的属性
文本的属性有3 种：
- 字体：font
- 水平对齐： textAlign
- 垂直对齐：textBaseline
1-1-font 字体
canvas 里的font 属性和css 的font 属性是一样的，它可以设置文本的粗细、字号、字体等。
- css 设置字体：p{font:bold 18px serif;}
- canvas 设置字体：ctx.font=‘bold 18px serif’
更多参数可参考css MDN：developer.mozilla.org/zh-CN/docs/…
1-2-textAlign 水平对齐
下方文字的x 位置都是一样，都是垂直虚线的x 位置，它们的textAlign 属性各不相同。
代码示例：
ctx.textAlign='start';
ctx.fillText('start',300,100);
ctx.textAlign='left';
ctx.fillText('left',300,150);
ctx.textAlign='end';
ctx.fillText('end',300,200);
ctx.textAlign='right';
ctx.fillText('right',300,250);
ctx.textAlign='center';
ctx.fillText('center',300,300);
- start：文本起始位对齐
- left：文本左对齐
- end：文本结束位置对齐
- right：文本右对齐
- center：文本居中对齐
注：start和left 的差异在文本的阅读方向dir
- html 文本默认自左向右读：
<html dir='ltr'>
- 当html 文本自右向左读时，start和left便会发生改变：
<html dir='rtl'>
1-3-textBaseline 垂直对齐
| alphabetic | 默认。标准字母基线对齐 |
|---|---|
| top | 上对齐 |
| hanging | 悬挂基线对齐 |
| middle | 垂直居中 |
| ideographic | 表意基线对齐 |
| bottom | 下对齐 |
代码示例：
ctx.textBaseline='top';
ctx.fillText('top',100,200);
ctx.textBaseline='middle';
ctx.fillText('middle',200,200);
ctx.textBaseline='bottom';
ctx.fillText('bottom',300,200);
ctx.textBaseline='alphabetic';
ctx.fillText('alphabetic',400,200);
2-绘制文本的方法
文本的绘制方法有2种：
- 填充文字 fillText(text, x, y , maxWidth)
- 描边文字 strokeText(text, x, y , maxWidth)
除此之外，还有一个方法可以获取文本的宽度：measureText(text)
示例代码：
//文字内容
const text='好好学习';
//字体
ctx.font='100px arial';
//描边宽度
ctx.lineWidth=3;
//描边色
ctx.strokeStyle='red';
//填充文字
ctx.fillText(text,100,300);
//描边文字
ctx.strokeText(text,100,300);
效果如下：
