黑马程序员技术交流社区

标题: 【济南校区】前端就业班笔记Canvas（五）：绘制文本 [打印本页]

作者: 小鲁哥哥 时间: 2018-5-24 11:51
标题: 【济南校区】前端就业班笔记Canvas（五）：绘制文本
本帖最后由小鲁哥哥于 2018-5-24 11:52 编辑

【济南校区】前端就业班笔记Canvas（五）

绘制文本的方法

CanvasRenderingContext2D.fillText()
CanvasRenderingContext2D.strokeText()
CanvasRenderingContext2D.measureText()

文本样式

CanvasRenderingContext2D.font
CanvasRenderingContext2D.textAlign
CanvasRenderingContext2D.textBaseline

绘制文字

语法:

CanvasRenderingContext2D.strokeText( text, x, y[, maxWidth] )
CanvasRenderingContext2D.fillText( text, x, y[, maxWidth] )

描述:

这两个方法的功能都是在给定的 x, y 坐标下绘制文本内容.
stroke 绘制描边文字, 文字内空心. fill 绘制填充文字, 即实心文字.
最后一个参数可选, 用于限制文字的总宽. 特殊条件下, 系统会自动调整文字宽度与大小以适应该参数限制.

案例

[JavaScript] 纯文本查看 复制代码

    ...

    ctx.strokeRect( 100, 100, 200, 50 );

    ctx.strokeText( 'Hello JK', 100, 100 );



    ctx.strokeRect( 100, 200, 200, 50 );

    ctx.fillText( 'Hello JK', 100, 200 );

效果

注意: 第一个文字由于中间空心, 所以文字相当于双线显示. 就显得较粗.根据绘制的矩形块可以发现文字几乎使用该点作为文字基线参考.

计算文本尺寸

语法: CanvasRenderingContext2D.measureText()

描述:

该方法返回一个文本尺寸对象, TextMetrics 对象.
TextMetrics 对象属性很多, 常用的 width 属性可以获取文字的宽度.

设置文字属性设置文字字体

语法: CanvasRenderingContext2D.font = value

描述:

该属性用于设置绘制字体的各种信息, 与 CSS 语法一致, 设置字体形状, 样式, 字号粗细等.
其顺序可以是: style | variant | weight | size/line-height | family.
默认值为 10px sans-serif

修改字号后查看 strokeText 与 fillText 的区别

[JavaScript] 纯文本查看 复制代码

    ...

    ctx.font = '50px 黑体';

    ctx.strokeRect( 100, 100, 200, 50 );

    ctx.strokeText( 'Hello JK', 100, 100 );



    ctx.strokeRect( 100, 200, 200, 50 );

    ctx.fillText( 'Hello JK', 100, 200 );

效果

设置字体水平对齐方式

语法: CanvasRenderingContext2D.textAlign = value

描述:

该属性用于设置文字的水平对齐方式. 设置文字居中, 靠左右对齐等.
该属性可以设置的值有: start( 默认 ), end, left, right, center.

start 表示根据参考基准点的垂直直线左靠对齐

[JavaScript] 纯文本查看 复制代码

    ...

    ctx.moveTo( 150, 100 );

    ctx.lineTo( 150, 200 );

    ctx.moveTo( 100, 150 );

    ctx.lineTo( 200, 150 );

    ctx.strokeStyle = 'red';

    ctx.stroke();



    ctx.font = '30px 黑体';

    ctx.textAlign = 'start'; // 默认

    ctx.fillText( '测试文字', 150, 150 );

效果

end 表示根据参考基准点的垂直直线右靠对齐

[JavaScript] 纯文本查看 复制代码

    ...

    ctx.font = '30px 黑体';

    ctx.textAlign = 'end';

    ctx.fillText( '测试文字', 150, 150 );

效果

left 与 right 就是左对齐与右对齐的意思

[JavaScript] 纯文本查看 复制代码

    ...

    ctx.font = '30px 黑体';

    ctx.textAlign = 'left';

    ctx.fillText( 'left', 150, 150 );

    ctx.textAlign = 'right'

    ctx.fillText( 'right', 150, 150 );

效果

最后 center 就是居中的含义.

[JavaScript] 纯文本查看 复制代码

    ctx.font = '50px 黑体'

    ctx.textAlign = 'center';

    ctx.fillText( '00000', 150, 150 );

效果

设置字体垂直对齐方式

语法: CanvasRenderingContext2D.textBaseline = value

描述:

该方法设置文字在垂直方向上的对齐方式.
该属性可以取值: top, middle, bottom, hanging, alphabetic, ideographic
基于参考点的直线, 其中 top, middle, buttom 分别表示靠上, 居中, 靠下对齐.
alphabetic 表示字母基线, 类似于英文字母的对齐方式. 例如 a, g, f 等字母.
ideographic 表意对齐. 使用字母对齐中超出的字母为参考. 即比字母基线略靠下.
所有的对齐方式是根据文字特点相关的. 对于中文主要使用的还是 top, bottom 和 middle.

top, middle, bottom 使用的较多

[JavaScript] 纯文本查看 复制代码

    ...

    // ------------------

    ctx.moveTo( 100, 80 );

    ctx.lineTo( 500, 80 );

    ctx.strokeStyle = 'red';

    ctx.stroke();



    ctx.font = '30px 黑体';



    ctx.textBaseline = 'top';

    ctx.fillText( 'abfghijklpqrty', 150, 80 );



    // ------------------

    ctx.translate( 0, 100 );

    ctx.moveTo( 100, 80 );

    ctx.lineTo( 500, 80 );

    ctx.strokeStyle = 'red';

    ctx.stroke();



    ctx.font = '30px 黑体';



    ctx.textBaseline = 'bottom';

    ctx.fillText( 'abfghijklpqrty', 150, 80 );



    // ------------------

    ctx.translate( 0, 100 );

    ctx.moveTo( 100, 80 );

    ctx.lineTo( 500, 80 );

    ctx.strokeStyle = 'red';

    ctx.stroke();



    ctx.font = '30px 黑体';



    ctx.textBaseline = 'middle';

    ctx.fillText( 'abfghijklpqrty', 150, 80 );

效果

alphabetic 表示字母参考线, ideographic 会比它低一点, hanging 表示悬挂.

[JavaScript] 纯文本查看 复制代码

    ctx.moveTo( 100, 80 );

    ctx.lineTo( 500, 80 );

    ctx.strokeStyle = 'red';

    ctx.stroke();



    ctx.font = '30px 黑体';



    ctx.textBaseline = 'alphabetic';

    ctx.fillText( 'abfghijklpqrty', 150, 80 ); 



    // -------------------------------------------------



    ctx.translate( 0, 100 );

    ctx.moveTo( 100, 80 );

    ctx.lineTo( 500, 80 );

    ctx.strokeStyle = 'red';

    ctx.stroke();



    ctx.font = '30px 黑体';



    ctx.textBaseline = 'ideographic';

    ctx.fillText( 'abfghijklpqrty', 150, 80 ); 



    // -------------------------------------------------



    ctx.translate( 0, 100 );

    ctx.moveTo( 100, 80 );

    ctx.lineTo( 500, 80 );

    ctx.strokeStyle = 'red';

    ctx.stroke();



    ctx.font = '30px 黑体';



    ctx.textBaseline = 'hanging';

    ctx.fillText( 'abfghijklpqrty', 150, 80 );

效果

实际上大多数参考方式只有在特定语言中有作用, 而且与字体也有相对复杂的关系. 例如( 下图是有部分错误的 ):

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2