HTML5 CANVAS:绘制文字

时间:2016-03-08
1.jpg

  我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。

  绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字,可以使用2D上下文的fillStyle和strokeStyle属性来完成。

  要在canvas上绘制文字,可以通过2D上下文的fillText()函数或strokeText()函数来完成。下面是一个简单的例子:
  1. var canvas  = document.getElementById("ex1");
  2. var context = canvas.getContext("2d");

  3. context.font      = "normal 36px Verdana";
  4. context.fillStyle = "#000000";
  5. context.fillText("HTML5 Canvas Text", 50, 50);

  6. context.font        = "normal 36px Arial";
  7. context.strokeStyle = "#000000";
  8. context.strokeText("HTML5 Canvas Text", 50, 90);     
复制代码

  下面的图片是上面代码的返回结果:

2.jpg

  字体和样式
  当在HTML5 canvas上绘制文字的时候,我们可以设置文字的字体和样式。我们可以通过一组2D上下文的font属性来完成这些工作。这些属性和CSS中设置字体的属性是兼容的:
  1. [font style][font weight][font size][font face]     
复制代码

  举例来说,我们可以这样设置字体:
  1. context.font = "normal normal 20px Verdana";         
复制代码

  对于上面的这些属性,我们可以有下面的一些可取值:

   font style可取值有:
    normal
    italic
    oblique
    inherit

   font weight可取值有:
    normal
    bold
    bolder
    lighter
    auto
    inherit
    100
    200
    300
    400
    500
    600
    700
    800
    900

   font size:字体的尺寸,单位像素。
   ont face:字体。例如:verdana, arial, serif, sans-serif, cursive, fantasy, monospace等

  需要注意的是,不是所有的浏览器都支持所有这些属性的,实际使用中你需要根据实际情况做一些测试。

  绘制文字
  当在HTML5 canvas中绘制文字的时候,你可以绘制填充文字,也可以绘制描边文字。它们分别通过2D上下文的fillText()和strokeText()函数来实现。这两个函数的定义如下:
  1. fillText   (textString, x, y [,maxWidth]);
  2. strokeText (textString, x, y [,maxWidth]);   
复制代码

  textString是要绘制的文字。

  x和y表示文字在canvas上的位置。x参数是文字的X轴坐标,y是文字Y轴坐标,但是它如何在Y轴上定位还要取决于文本的基线。文本的基线会在后面介绍。

  maxWidth表示文字在水平方向上的最大宽度。详细内容接着往下看。

  下面是一个示例代码:
  1. context.font      = "36px Verdana";
  2. context.fillStyle = "#000000";
  3. context.fillText("HTML5 Canvas Text", 50, 50);     
复制代码

  文本的最大宽度
  可选参数maxWidth表示在canvas上绘制文字的时候,文字水平方向上最大的宽度不能大于参数指定的值。如果文本的宽度大于maxWidth指定的值,那么文字的宽度会被压缩。注意不是被剪裁掉。下面是一个例子,在canvas中绘制两串相同的文本,但是使用不同的maxWidth属性:
  1. context.font      = "36px Verdana";
  2. context.fillStyle = "#000000";
  3. context.fillText("HTML5 Canvas Text", 50, 50);
  4. context.fillText("HTML5 Canvas Text", 50, 100, 200);     
复制代码

  上面的代码的返回结果如下,注意第二串文字被压缩为总宽度200像素:

3.jpg

  文字的颜色
  文字的填充或描边颜色是通过2D上下文的fillStyle和strokeStyle属性来完成的。实现方式和图形的方式相同。可以参考HTML5 Canvas:绘制矩形中的介绍,这里不再重复。

  测量文本的宽度
  在2D上下文中有一个函数可以用于测量文本的宽度,返回以像素为单位的结果值。这个函数不能测量高度。这个函数是measureText()。下面是一段示例代码:
  1. var textMetrics = context.measureText("measure this");

  2. var width = textMetrics.width;   
复制代码

  通过测量文本的宽度,我们可以知道当前的这些文字是否能够放在当前的canvas容器中,或者其它一些用途。

  文本的基线
  文本的基线用于决定如何解释fillText()和strokeText()函数中的y参数。通俗来讲,就是文字在垂直方向上如何定位。注意,在不同的浏览器中,这些解释可能会稍微有一些不同。

  可以通过2D上下文的textBaseline属性来设置文本的基线。

  文本基线的语法为:
  1. ctx.textBaseline=
  2.    "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";      
复制代码

  下表中列出了文本基线的可取值及其描述。
  
取值 描述
top 文本以文本中最高的字符为基线进行对齐
hanging 文本的基线是悬停线(hanging baseline)。它和top取值基本相同,多数情况下你可能看不出有什么区别
middle 文本的基线是文字的中心线
alphabetic 文本的基线是正常的文字基线
ideographic 文本的基线是水平方向的字形底部
bottom 文本以文本中最低的字符为基线进行对齐

  看了上面的描述大家会一头雾水。现在举例来说明。我们使用相同的y值(75)来绘制一串文本但是为每一个文字设置不同的基线值。在图片中我们绘制一条y=75的执行来表示所有文字的基线。

4.jpg

  上面图片的实现代码如下:
  1. context.stokeStyle = "#000000";
  2. context.lineWidth  = 1;
  3. context.beginPath();
  4. context.moveTo(  0, 75);
  5. context.lineTo(500, 75);
  6. context.stroke();
  7. context.closePath();

  8. context.font      = "16px Verdana";
  9. context.fillStyle = "#000000";

  10. context.textBaseline = "top";
  11. context.fillText("top", 0, 75);

  12. context.textBaseline = "hanging";
  13. context.fillText("hanging", 40, 75);

  14. context.textBaseline = "middle";
  15. context.fillText("middle", 120, 75);

  16. context.textBaseline = "alphabetic";
  17. context.fillText("alphabetic", 200, 75);

  18. context.textBaseline = "ideographic";
  19. context.fillText("ideographic", 300, 75);

  20. context.textBaseline = "bottom";
  21. context.fillText("bottom-glyph", 400, 75);      
复制代码

  文本对齐
  2D上下文的textAlignment属性用于定义文字在水平方向上如何对齐。换句话来说,就是textAlignment属性定义绘制文本时文本的x坐标属性。

  textAlignment属性的语法为:
  1. ctx.textAlign = "left" || "right" || "center" || "start" || "end";  
复制代码

  下表中列出了textAlignment属性各个取值及其描述。
 
取值 描述
start 文本从x左边开始绘制
left 文本从x左边开始绘制,和start属性相同
center x坐标位于文本的中心
end x坐标位于文本的末尾
right x坐标位于文本的末尾,和end属性相同

  在下面的例子中显示了textAlignment属性的各种取值的定位。垂直直线的x坐标为x=250,所有的字的x属性值也是250,但是它们的textAlignment属性取值各不相同。

5.jpg

  上面的图片的实现代码如下:
  1. context.stokeStyle = "#000000";
  2. context.lineWidth  = 1;
  3. context.beginPath();
  4. context.moveTo( 250, 0);
  5. context.lineTo( 250, 250);
  6. context.stroke();
  7. context.closePath();

  8. context.font      = "16px Verdana";
  9. context.fillStyle = "#000000";

  10. context.textAlign = "center";
  11. context.fillText("center", 250, 20);

  12. context.textAlign = "start";
  13. context.fillText("start", 250, 40);

  14. context.textAlign = "end";
  15. context.fillText("end", 250, 60);

  16. context.textAlign = "left";
  17. context.fillText("left", 250, 80);

  18. context.textAlign = "right";
  19. context.fillText("right", 250, 100);        
复制代码

  本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/ziliaoku/ ... g/201507172250.html



上一篇:HTML5 SVG带圆形进度条动画的提交按钮特效 下一篇:HTML5实现手势屏幕解锁

相关文章

最新文章