HTML5 Canvas中绘制文本

2023-05-27 0 960

画笔中不但能绘出绘图,还能绘出文档。绘出文档,既能采用充填方式,也能采用描画方式:

fillText(text, x, y,[maxWidth])

strokeText(text, x, y,[maxWidth])

则表示在(x,y)的边线,绘出text的文本。可选模块maxWidth为文档的最小长度,基层单位为画素。假如增设了该特性,当文档文本长度少于该初始值,则会手动按比率增大手写体,使文档的文本全部由此可见;未少于时,则以前述长度表明。假如未增设该特性,当文档文本长度少于画笔长度时,远远超过的文本将被暗藏。

为确保文档在各应用程序下表明完全一致,须要增设文档的式样特性,可增设的特性见表41:

表41文档的式样属性

HTML5 Canvas中绘制文本

右图展现了textAlign和textBaseline这三个特性的可能将值,每一文档数组上面的极细是剖面(baseline),小方格记号了绘出文档时的座标(x,y)。

初始化一场fillText()或strokeText()方式,根本无法绘出带队文档,假如要绘出二百一十三文档,须要初始化数次。

context.font =bold 35px Arial;

context.textAlign =center;

context.textBaseline =bottom;

context.fillStyle =#ccc;

context.strokeText(“strokeText”,150,100);

context.fillText(“fillText”,180,140);

font特性定义绘出文档所采用的手写体,其值是一个数组,语法跟CSS的font特性完全一致。上述代码的运行结果如图414所示:

HTML5 Canvas中绘制文本

图414绘出文档

跟绘出绘图一样,在对文档进行充填或描边时,除了采用纯色,也能采用渐变或图案。

说明:textAlign特性定义的是x座标点的边线,假设其值为”center”,则x座标点就在文档的中心点的边线,其值为”left”,则x座标点就在文档的最左边的边线。对于从左到右的文档而言,”start”和”left”是等价的,”end”和”right”是等价的;对于从右到左的文档而言,”start”和”right “是等价的,”end”和”left “是等价的。能通过元素的dir特性来增设文档的方向,“rtl”(right-to-left)则表示从右到左,“ltr”( left-to-right)则表示从左到右。

想了解更

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务