《HTML5 Canvas游戏开发实战》——2.3　绘制文本

本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第2章，第2.3节,作者：张路斌著， 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.3　绘制文本

文本在任何应用里都是必不可少的，可是，在Canvas的API中，只能显示文字，无法直接绘制一个输入框。所以，当需要显示输入框的时候需要使用HTML中的文本框来代替。下面来讲一下如何显示各种各样的文字。2.3.1　绘制文字绘制文字有fillText和strokeText两种方法，下面分别说明。1 . 使用fillText绘制文字fillText(text,x,y,maxWidth)函数很简单，它的4个参数分别是：文本字符串、坐标x和坐标y、文本宽，其中第4个参数可以省去。当第4个参数省去的时候，文本宽度会自动设定为整个文本的宽度。具体使用方法如代码清单2-15所示。代码清单　2-15

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //设定文字大小和字体 ctx.font="30px Arial"; //设定文字内容 ctx.fillText("Hello World",100,50); </script>

运行效果如图2-17所示。

如果给fillText设定了第4个参数，那么整个文本的宽度就会发生变化，比如：

ctx.fillText("Hello World",100,50,50);

运行效果如图2-18所示。

2 . 使用strokeText绘制文字使用strokeText(text,x,y,maxWidth)函数同样需要4个参数，它的用法与fillText函数完全相同，具体实现如代码清单2-16所示。代码清单　2-16

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //设定文字大小和字体 ctx.font="30px Arial"; //描画文字 ctx.strokeText ("Hello World",100,50); </script>

运行效果如图2-19所示。

从效果图上我们不难看出strokeText与fillText的区别，strokeText相当于线，而fillText相当于实心图形，这和之前画图形的绘制方法是相似的。2.3.2　文字设置上一节我们只是简单地讲解了如何显示一个文本，但是，一个文本可以有多种字体格式，各种文字也有大有小，有粗有细，本节会针对文字的设置做详细的说明。1 . 文字大小可能大家已经发现，在上一节的各代码中都用到了font这个参数，如下面一行代码：

ctx.font="30px Arial";

它表示文字大小为30，字体为Arial。下面我们来了解如何设定多种不同的文字大小，具体如代码清单2-17所示。代码清单　2-17

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); //设定文字大小为30px ctx.font="30px Arial"; ctx.fillText("Hello World",100,50); ctx.beginPath(); //设定文字大小为50px ctx.font="50px Arial"; ctx.fillText("Hello World",100,150); ctx.beginPath(); //设定文字大小为100px ctx.font="70px Arial"; ctx.fillText("Hello World",100,250); </script>

运行效果如图2-20所示。

2 .文字字体下面我们试着改变font中的字体，看看具体表现如何，如代码清单2-18所示。代码清单　2-18

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); //设定文字字体为Arial ctx.font="30px Arial"; ctx.fillText("Hello World (Arial)",50,50); ctx.beginPath(); //设定文字字体为Verdana ctx.font="30px Verdana"; ctx.fillText("Hello World (Verdana)",50,100); ctx.beginPath(); //设定文字字体为Times New Roman ctx.font="30px Times New Roman"; ctx.fillText("Hello World (Times New Roman)",50,150); ctx.beginPath(); //设定文字字体为Courier New ctx.font="30px Courier New"; ctx.fillText("Hello World (Courier New)",50,200); ctx.beginPath(); //设定文字字体为serif ctx.font="30px serif"; ctx.fillText("Hello World (serif)",50,250); ctx.beginPath(); //设定文字字体为sans-serif ctx.font="30px sans-serif"; ctx.fillText("Hello World (sans-serif)",50,300); </script>

运行效果如图2-21所示。

可以看到，经过简单的设置就实现了不同的字体效果。3 . 文字粗体效果和CSS一样，我们同样可以在Canvas中设置文字的font-weight属性，来给文字设置粗体效果。它同样可通过font来设置，使用方法如下：

ctx.font='normal 30px Arial';

font-weight的值可以是normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细），还可以通过数字直接来设置，如下所示：

ctx.font='300 30px Arial';

下面设置不同的font-weight，来对比一下效果，如代码清单2-19所示。代码清单　2-19

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); //设定font-weight为normal ctx.font='normal 30px Arial'; ctx.fillText("Hello World (normal)",50,50); ctx.beginPath(); //设定font-weight为bold ctx.font='bold 30px Arial'; ctx.fillText("Hello World (bold)",50,90); ctx.beginPath(); //设定font-weight为bolder ctx.font='bolder 30px Arial'; ctx.fillText("Hello World (bolder)",50,130); ctx.beginPath(); //设定font-weight为lighter ctx.font='lighter 30px Arial'; ctx.fillText("Hello World (lighter)",50,170); ctx.beginPath(); //设定font-weight为100 ctx.font='100 30px Arial'; ctx.fillText("Hello World (100)",50,210); ctx.beginPath(); //设定font-weight为600 ctx.font='600 30px Arial'; ctx.fillText("Hello World (600)",50,250); ctx.beginPath(); //设定font-weight为900 ctx.font='900 30px Arial'; ctx.fillText("Hello World (900)",50,290); </script>

运行效果如图2-22所示。

可以看到，文字的粗细根据font-weight的值不同，效 果也都有所不同。4 . 文字斜体效果有时候我们需要用斜体的方式来显示文字，Canvas中的文字也有font-style属性，它也可通过设置font来处理，使用的方法如下：

ctx.font='italic 30px Arial';

font-style的值可以设置为italic，也可以设置为oblique，它们都表示斜体，如代码清单2-20所示。代码清单　2-20

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); //设定font-weight为normal ctx.font='normal 30px Arial'; ctx.fillText("Hello World (normal)",50,50); ctx.beginPath(); //设定font-style为italic ctx.font='italic 30px Arial'; ctx.fillText("Hello World (italic)",50,90); ctx.beginPath(); //设定font-style为oblique ctx.font='oblique 30px Arial'; ctx.fillText("Hello World (oblique)",50,130); </script>

运行效果如图2-23所示。

2.3.3　文字的对齐方式Canvas中的文字通过textAlign和textBaseline来实现文字的对齐。textAlign是水平方向的文字对齐，它的值包括center、end、left、right、start。textBaseline是竖直方向的文字对齐，它的值包括alphabetic、bottom、hanging、ideographic、middle、top。首先看水平方向的对齐。为了看出不同的对齐方式之间的区别，我们在文字坐标位置画一条竖线，如代码清单2-21所示。代码清单　2-21

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(160,0); ctx.lineTo(160,300); ctx.stroke(); ctx.beginPath(); ctx.textAlign='start'; ctx.font='30px Arial'; ctx.fillText("Hello World",160,50); ctx.beginPath(); ctx.textAlign='end'; ctx.font='30px Arial'; ctx.fillText("Hello World",160,100); ctx.beginPath(); ctx.textAlign='left'; ctx.font='30px Arial'; ctx.fillText("Hello World",160,150); ctx.beginPath(); ctx.textAlign='center'; ctx.font='30px Arial'; ctx.fillText("Hello World",160,200); ctx.beginPath(); ctx.textAlign='right'; ctx.font='30px Arial'; ctx.fillText("Hello World",160,250); </script>

运行效果如图2-24所示。

可以看到，start与left相同，表示文字从左侧开始对齐；end与right相同，表示文字从右侧开始对齐，center表示文字居中。接下来看竖直方向的对齐。同样，为了看出不同的对齐方式之间的区别，我们在文字坐标位置画一条横线，如代码清单2-22所示。

代码清单　2-22

<script type="text/javascript"> var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); ctx.textBaseline='alphabetic'; ctx.font='30px Arial'; ctx.fillText('Hello World',50,50); ctx.moveTo(0,50); ctx.lineTo(250,50); ctx.stroke(); ctx.textBaseline='bottom'; ctx.font='30px Arial'; ctx.fillText('Hello World',50,100); ctx.moveTo(0,100); ctx.lineTo(250,100); ctx.stroke(); ctx.textBaseline='hanging'; ctx.font='30px Arial'; ctx.fillText('Hello World',50,150); ctx.moveTo(0,150); ctx.lineTo(250,150); ctx.stroke(); ctx.textBaseline='ideographic'; ctx.font='30px Arial'; ctx.fillText('Hello World',50,200); ctx.moveTo(0,200); ctx.lineTo(250,200); ctx.stroke(); ctx.textBaseline='middle'; ctx.font='30px Arial'; ctx.fillText('Hello World',50,250); ctx.moveTo(0,250); ctx.lineTo(250,250); ctx.stroke(); ctx.textBaseline='top'; ctx.font='30px Arial'; ctx.fillText('Hello World',50,300); ctx.moveTo(0,300); ctx.lineTo(250,300); ctx.stroke(); </script>

运行效果如图2-25所示。

图2-25所示很清晰地体现了竖直方向的各个对齐方式的区别。

相关资源：移动互联网之路：HTML5 CSS3 jQuery Mobile APP与移动网站设计从入门到精通.李晓斌(带详细书签).pdf