HTML5- Canvas入门(四)

前几章我们学习了矩形、多边形、圆形、曲线等图形的绘制,今天来学习下更简单一些的文本绘制及其各种功能方法。

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)。

该段代码效果如下:

HTML5- Canvas入门(四)

HTML5- Canvas入门(四)

上方虽然绘制出相应的文本,但由于没有设置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);

效果如下:

HTML5- Canvas入门(四)

HTML5- Canvas入门(四)

显然上面绘制出来的文本还是有问题,即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);

HTML5- Canvas入门(四)

可见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);

HTML5- Canvas入门(四)

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

HTML5- Canvas入门(四)

来段测试代码:

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);

HTML5- Canvas入门(四)

HTML5- Canvas入门(四)

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

textAlign的可选值如下:

HTML5- Canvas入门(四)

测试代码:

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);

HTML5- Canvas入门(四)

HTML5- Canvas入门(四)

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

HTML5- Canvas入门(四)

由于文本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属性了。

HTML5- Canvas入门(四)

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

我们可以通过给 shadowColorshadowBlur 赋值来给画布对象添加投影,前者是设置颜色(没有定义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);

HTML5- Canvas入门(四)

另外投影还可以通过 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);

HTML5- Canvas入门(四)

HTML5- Canvas入门(四)

本章就介绍到这里,希望感兴趣的朋友能从中学到知识,共勉~

HTML5- Canvas入门(四)

上一篇:Java学习笔记21(String类补充:正则表达式)


下一篇:UI控件(复习一下)