HTML5技术

【canvas学习笔记四】绘制文字 - 池月

字号+ 作者:H5之家 来源:H5之家 2017-08-15 11:00 我要评论( )

本节我们来学习如何绘制文字。 绘制文字有两个主要的方法: fillText(text, x, y [, maxWidth]) 在x, y位置填充文字text,有一个可选参数maxWidth设置最大绘制宽度。 strokeText(text, x, y [, maxWidth]) 在x, y位置给文字text描边,有一个可选参数maxWidth

本节我们来学习如何绘制文字。
绘制文字有两个主要的方法:

fillText(text, x, y [, maxWidth])
在x, y位置填充文字text,有一个可选参数maxWidth设置最大绘制宽度。
strokeText(text, x, y [, maxWidth])
在x, y位置给文字text描边,有一个可选参数maxWidth设置最大绘制宽度。

文字样式

有一些属性用来设置文字的样式:

font = value
设置字体、大小等,语法和CSS的font-famaliy属性语法一样。
textAlign = value
设置对齐方式。有center、right等几种值,和CSS的值一样。
textBaseline = value
设置文字对齐的基线。有如下几种值: top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value
设置文字的方向。有如下几种值: ltr, rtl, inherit。默认值是inherit。

下面这张图展示了textBaseline属性各个值得对齐的基线:

image


其中说明一下top和bottom对齐的是em square的顶部和底部。em是印刷术里的一种单位,学过CSS的都是知道em这个单位,em就是一个字元的高度。而em square就是一个字元的方块。就像下面这样:

image

每个字母都占据着一个固定方块的大小。

例子

ctx ...); }

image

ctx ...); }

image

文字规格

canvas还提供了一个方法测量字体的宽度:

measureText()
返回一个TextMetrics对象,这个对象包含了文字当前的宽度,单位是像素。

TextMetrics对象还包含很多属性,但是很多还没有得到完全支持,width属性是得到现代浏览器支持的(当然IE8是不行的啦)。

例子

ctx text .

Notes

在Gecko内核浏览器或其他应用中,旧版本的一些含有moz前缀的绘图相关API已经弃用了,在可以查看。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Go语言学习笔记(七)杀手锏 Goroutine + Channel - 索宁

    Go语言学习笔记(七)杀手锏 Goroutine + Channel - 索宁

    2017-08-08 18:00

  • Canvas名侦探柯南-canvas练习 - Rh九尾鱼

    Canvas名侦探柯南-canvas练习 - Rh九尾鱼

    2017-08-08 11:02

  • canvas一周一练 -- canvas绘制马尾图案 (5) - 张不丢

    canvas一周一练 -- canvas绘制马尾图案 (5) - 张不丢

    2017-08-07 14:02

  • canvas基础 - 一颗快乐心

    canvas基础 - 一颗快乐心

    2017-08-03 15:00

网友点评
T