
在尚未有浏览器能够完全正常的支持@6也。举例来说,在Firefox下,最后一行所用的Web字体Scriptina若在HTML文档中使用了超过一次,那么它仅在Canvas中出现。同样,小型大写字母也无法正常在Firefox下显示,这也是从第二个到最后一个例子都没有正常显示的原因。
水平锚点
属性textAlign决定了Canvas文本的水平锚点:
context.textAlign=[
left|right|center|*start|end
在CSS属性text-align中,关键词left、right及center出场频率相当高,而start和end已经加入CSS3扩展,它们可以根据相关语言调整文本方向。因为一些语言的书写习惯并非从左至右而是从右至左,例如阿拉伯语和希伯来语。
展示了hr(从左至右)及rtl(从右至左)两种文本流(textflow)水平锚点,以及属性start及end的调整方向效果。
浏览器下,文本方向可以由全局属性document.dir改变。
垂直锚点
垂直锚点及所有字形排列的基线由第三个也是最后一个文本属性决定——textBaseline:
context.textBaseline=[
top|middle|^alphabetic|bottom|hanging|ideographic头四个textBaseline关键字为top、middle、ahphabetic及bottom,含义与名称一致。在书写梵语、北印度语、马拉地语、尼泊尔语或旁遮普语,以及孟加拉语时,要用到梵文字母、果鲁穆奇字母以及孟加拉字母这三种印度字母表,因而需要为它们增加一条悬挂基线。而ideographic(表意文字书写系统)包括中文、日文、韩语及越南语。图9展示了textBaseline的垂直铺点。
绘制及测量文本
—旦决定了字体及锚点,
宁波网站建设认为要做的事情只剰下书写文字了。与绘制矩形类似,你可以定义填充及/或轮廓,还可以用备选参数maxwidth来注明文本宽度的最大值:
context.fillText(text,x,y,maxwidth)
context.strokeText(text,x,y,maxwidth)
最后,可以使用measureTextO方法来决定文本尺寸——在考虑到当前格式的情况下至少能决定文本宽度。在图0的范例中,右下方的值()用以下代码生成:
TextWidth=context.measureText(text).width目前还没有办法设定边界框的高度及原点,但在规范的未来版本中,可能可以通过多行文字布局实现。Canvas规范中文本章节的最后一项看上去像个承诺:它指出未来也许可以通过CSS在Canvas中实现文档片段(轡如说,格式化段落)。
CanvasAPI为当前使用基于栅格格式的Canvas提供了许多功能选择,除了内嵌图像及视频外,你还可以读写画布上的任何一个像素上。
本文由乐华网络编辑,转载请注明出处
宁波网站建设www.leseo.net