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

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

  8. context.font        = "normal 36px Arial";
  9. context.strokeStyle = "#000000";
  10. 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");

  3. 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();

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

  12. context.textBaseline = "top";
  13. context.fillText("top", 0, 75);

  15. context.textBaseline = "hanging";
  16. context.fillText("hanging", 40, 75);

  18. context.textBaseline = "middle";
  19. context.fillText("middle", 120, 75);

  21. context.textBaseline = "alphabetic";
  22. context.fillText("alphabetic", 200, 75);

  24. context.textBaseline = "ideographic";
  25. context.fillText("ideographic", 300, 75);

  27. context.textBaseline = "bottom";
  28. 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();

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

  12. context.textAlign = "center";
  13. context.fillText("center", 250, 20);

  15. context.textAlign = "start";
  16. context.fillText("start", 250, 40);

  18. context.textAlign = "end";
  19. context.fillText("end", 250, 60);

  21. context.textAlign = "left";
  22. context.fillText("left", 250, 80);

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

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



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

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权