上节文章中,给大家分享了canvas
最基础的用法,包括绘制线条、控制渲染方式、绘制图形、作用域、添加阴影、清理、剪切等功能,本节将继续为大家分享canvas
的基础用法,同时也是最后一节基础知识分享,之后的内容,我们将会进入到对webgl
的分享中。
1. 文本绘制
首先我们要提到的是绘制文本,在canvas
的开发过程中,文本的内容是肯定会存在的。本小节就来给大家分享下如何渲染文本。
1.1 绘制空心和实心文本
canvas
中提供了两种绘制文本的方法,分别是绘制实心文本和空心文本,它们的方法分别是:
- strokeText(text, x, y, maxWidth): 绘制空心文本
- fillText(text, x, y, maxWidth): 绘制实心文本
参数介绍:
- text: 要绘制的文本内容
x, y
: 坐标点,文本左上角的坐标点- maxWidth: 允许渲染的最大像素宽度
栗子:
// 绘制实心文本
c.fillText('hello world', 100, 100); // 将 hello world 这个内容从 100 100 这个点开始渲染。
// 绘制空心文本
c.strokeText('hello world', 200, 200);
如果这里你的字体是默认大小,可能会看不到空心效果。改变字体大小在下文中有分享到。
1.2 改变文本样式
如果我们想修改字体的颜色,可以根据 绘制图形 一节中的方法,使用 strokeStyle、fillStyle
来修改。
1. 要设置实心文本字体为蓝色
c.fillStyle = 'blue';
c.fillText('hello world', 100, 100);
2. 要设置空心字体为红色
c.strokeStyle = 'yellow';
c.strokeText('hello world', 200, 200);
1.3 改变文本大小和字体样式
修改字体大小和字体样式需要用到 font = '字体大小 字体样式’
属性。
如:把字体改为 宋体 40px。
c.font = '40px 宋体';
如果是特殊的字体,会出现不支持的现象。
1.4 修改文本对齐方式
文本对齐方式分为 垂直 和 水平 对齐方式。
1. 垂直方向对齐。
这里需要用到 textBaseLine
这个属性。意为按照基线对齐。它有6个值,分别是:
- alphabetic: 默认值,意为普通的字母基线。可理解为四线三格的第三条线。
- top:文字头部对齐基线
- hanging:悬挂基线,与top稍有不同
- middle:文字中部对齐
- ideographic:表意基线。稍难理解,可看示意图
- bottom:文字底部对齐基线
示例:
// 首先我们画一条基准线,让文字按照这条线对齐
c.strokeStyle = 'blue';
c.moveTo(5, 100);
c.lineTo(700, 100);
c.stroke();
c.font = '20px 宋体';
// 枚举可用的对齐方式。
c.textBaseline = 'top';
c.fillText('Top', 5, 100);
c.textBaseline = 'bottom';
c.fillText('Bottom', 100, 100);
c.textBaseline = 'middle';
c.fillText('Middle', 200, 100);
c.textBaseline = 'alphabetic';
c.fillText('Alpha