HTML5- Canvas入门（四）

前几章我们学习了矩形、多边形、圆形、曲线等图形的绘制，本文我们来学习下更简单一些的文本绘制及其各种功能方法。感兴趣的同学参考下.

在canvas中我们可以通过 strokeText() 和 fillText() 来绘制描边文本或者实心文本：

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,c.width,c.height);
gradient.addColorStop("0","green");
gradient.addColorStop("1","rgba(200,255,10,0.5)");
ctx.fillStyle=gradient;
ctx.strokeStyle= "red";
ctx.fillText("fillText",50,10);
ctx.strokeText("strokeText",50,70);
</script>

 

strokeText() 和 fillText() 内均有3个参数，第一个字符串参数表示要显示的文本内容，后面2个参数表示文本绘制的起始点坐标(x,y)。

该段代码效果如下：

上方虽然绘制出相应的文本，但由于没有设置font-size导致太小不好看，我们可以通过 font() 方法来做设置，要知道它的参数跟css中font属性的参数是一致的，我们可以一口气设置上文本的大小、字体、粗细等：

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,c.width,c.height);
gradient.addColorStop("0","green");
gradient.addColorStop("1","rgba(200,255,10,0.5)");
ctx.fillStyle=gradient;
ctx.strokeStyle= "red";
ctx.font="italic 30px Arial bold";//定义字体样式
ctx.fillText("fillText",50,10);
ctx.strokeText("strokeText",50,70);

 

效果如下：

 

显然上面绘制出来的文本还是有问题，即fillText的上半身居然跑到画布外去了，话说我们不是从坐标(50,10)的位置开始绘制的文本么，怎么向上偏移了那么多？

这是因为canvas绘制出来的文本在垂直方向上并不是默认顶部对齐的，我们画一条参考线来参详其对齐方式：

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10,60);
ctx.lineTo(290,60);
ctx.stroke();
var thetext = "Here`s some words..."
ctx.fillStyle="red";
ctx.font="italic 30px Arial bold";
ctx.fillText(thetext,80,60);

 

可见canvas默认文本在垂直方向是底部对齐的。若要对此特性进行修改，可通过定义 textBaseline 来改变文本在垂直方向的基线位置：

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10,60);
ctx.lineTo(290,60);
ctx.stroke();
var thetext = "Here`s some words..."
ctx.fillStyle="red";
ctx.font="italic 30px Arial bold";
ctx.textBaseline="top"; //设置文本的基线为顶部
ctx.fillText(thetext,80,60);

 

注意这里我们是定义textBaseline的值为“top”，即要求文本基线位于文本最顶部，除了"top"还有更多可选值，它们所对应的效果如下：

来段测试代码：

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10,60);
ctx.lineTo(290,60);
ctx.stroke();
ctx.fillStyle="red";
ctx.font="italic 14px Arial";
ctx.textBaseline="alphabetic";
ctx.fillText("alphabetic",10,60);
ctx.textBaseline="top"; 
ctx.fillText("top",80,60);
ctx.textBaseline="bottom";
ctx.fillText("bottom",100,60);
ctx.textBaseline="middle";
ctx.fillText("middle",150,60);
ctx.textBaseline="hanging";
ctx.fillText("hanging",210,60);

 

 

既然可以设置文本在垂直方位的显示方式，自然也可以设置文本在水平方向的对齐方式了，我们可以通过定义 textAlign 的值来实现需求。

textAlign的可选值如下：

测试代码：

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(150,10);
ctx.lineTo(150,190);
ctx.stroke();
ctx.fillStyle="red";
ctx.font="italic 14px Arial";
ctx.textAlign="start";
ctx.fillText("start",150,40);
ctx.textAlign="end"; 
ctx.fillText("end",150,60);
ctx.textAlign="left";
ctx.fillText("left",150,90);
ctx.textAlign="center";
ctx.fillText("center",150,130);
ctx.textAlign="right";
ctx.fillText("right",150,180);

 

 

我们重新来看看上文曾绘制的一个文本效果：

由于文本font-size设置的太大，导致文本超出了画布右侧区域，这段文本还不如不要写上去不是么？我们可以通过 measureText().width 方法来获取文本的宽度，进而判断是文本最终否会超出画布，如果会则取消绘制文本：

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle="red";
ctx.font="italic 30px Arial bold";
//ctx.font="italic 10px Arial bold";
var thetext = "Here`s some words...";
var text_width = ctx.measureText(thetext).width; //获得文本宽度
var x = 50; 
if( x + text_width <= c.width ){  //如果文本不会超出画布则绘制文本
    ctx.fillText(thetext,x,60);
}

 

我们要知道的是，其实 measureText() 对象就只有这么一个.width属性，由于文本在canvas中的不存在行高的，故无法获知文本的高度，也理所当然没有.height属性了。

 

最后说说如何给文本添加投影。其实在canvas中给对象添加投影所用到的方法是一致的，并不仅限于文本。

我们可以通过给 shadowColor 和 shadowBlur 赋值来给画布对象添加投影，前者是设置颜色（没有定义shadowColor的话默认为黑色），后者是设置要模糊的阶数（没有定义shadowBlur的话默认模糊阶数为0，也就是不对投影边缘做任何模糊）。

当然作为样式方法，它们依旧得在画布对象绘制之前定义才能生效：

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle="red";
ctx.font="italic 20px Arial bold";
var thetext = "Here`s some words...";
ctx.shadowColor = "blue";  //定义投影颜色为蓝色
ctx.shadowBlur = 15;   //定义投影模糊阶数为15像素
ctx.fillText(thetext,10,60);

 

另外投影还可以通过 shadowOffsetX 和 shadowOffsetY 来设置投影在横坐标或纵坐标方向上的偏移：

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle="red";
ctx.shadowColor = "blue";  
ctx.shadowBlur = 10;  
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = -40;
ctx.fillRect(60,60,100,100);