《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所示很清晰地体现了竖直方向的各个对齐方式的区别。