本帖最后由 小鲁哥哥 于 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
|
收藏
淘帖
踩
