Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

时间：2024-01-11 20:29:02

绘制文本

同样的,canvas也为绘制文本提供了相应的方法.

2D上下文提供的文本绘制方法主要有两个:

  1. fillText()
  2. strokeText()

这两个方法都接受四个参数

  1. 要绘制的文本字符串
  2. 绘制文本的X坐标
  3. 绘制文本的Y坐标
  4. 最大像素宽度

这些方法都以以下属性为基础:

  • font: 表示文本样式,大小,字体, 该属性以 CSS 中指定字体的格式来指定
  • textAlign: 表示文本对齐方式,可能的值有 "start" "end" "left" "right" "center"
  • textBaseline:表示文本基线

上述属性都有默认值,所以没有必要每次使用都为上述属性重新赋值

一般来说使用 fillText 的情况比较多,因为该方法显示的文字和网页中正常显示文字的区别不大,而 strokeText 方法则会对文本进行描边

以上一篇文章中的 时钟的例子为基础,如果我们希望为该时钟绘制表盘上的数字

那么则可以使用下方的代码:

// context 是已经获取到的2D上下文

context.font = "bold 14px Arial";

context.textAlign = "center";

context.textBaseline = "middle";

context.fillText = ("12",100,20);

此外关于文本基线 textBaseline ,该值以绘制的 y 坐标为标准

  • top: 表示 y 坐标与文本的顶部对齐
  • bottom:则表示 y 坐标与文本的底部对齐
  • 其余值则对应一些特定基线

由于绘制文本比较复杂,尤其是当我们需要将文本控制在某一区域中的时候

2D上下文为此提供了一个辅助确定文本大小的方法 measureText()

该方法接收一个参数,即要绘制的文本

返回一个 TextMetrics 对象,返回对象目前只有一个 width 属性,通过该属性可以获得传入的文本显示在页面中的大小

如果我们希望绘制的文本宽度小于某个值则可以使用该方法来判断文本大小

如下代码所示:

var fontSize = 100;

context.font = fontSize + "px Arial";

while(context.measureText("Hello World!").width > 140){

    fontSize --;

    context.font = fontSize + "px Arial";

}

context.fillText("Hello World",10,10); // 此时绘制的文本宽度将小于140

之前提到的绘制文本方法的第四个参数也能实现该效果,但是浏览器对该参数的支持并不乐观,所以使用时需要多加注意

相关文章