绘制文本

同样的,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

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

Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本的更多相关文章

  1. Javascript高级编程学习笔记(83)—— 富文本选区(3)

    富文本选区 在富文本编辑器中使用 iframe 的 getSelection() 方法可以获取选中的文本 该方法是 window 对象和 document 对象的属性,调用后会返回一个当前选选择文本的 ...

  2. Javascript高级编程学习笔记(82)—— 富文本操作(2)

    操作富文本 与富文本编辑器的交互的主要方式就是使用 document.execCommand() 方法 该方法可以对文档执行自定义命令,并且可以应用大多数格式 该方法接收三个参数: 要执行命令的名称 ...

  3. Javascript高级编程学习笔记(81)—— 富文本(1)

    富文本编辑 富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得) 常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了 ...

  4. Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径

    绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...

  5. Javascript高级编程学习笔记(86)—— Canvas(3)绘制矩形

    绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...

  6. Javascript高级编程学习笔记(94)—— Canvas(11) 合成

    合成 除了之前介绍的属性之外,还有两个属性会应用到整个2d上下文中; globalAlpha 用于指定所有绘制的透明度 globalComposition 用于表示后绘制的图形怎样与先绘制的图形进行结 ...

  7. Javascript高级编程学习笔记(93)—— Canvas(10) 模式及图像数据

    模式 模式其实就是重复的图像,用来填充或描边图形 要创建一个新模式,可以调用 createPattern()并传入两个参数 一个HTML img元素 用于表示如何重复的字符串 "repeat ...

  8. Javascript高级编程学习笔记(90)—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  9. Javascript高级编程学习笔记(89)—— Canvas(6) 变换

    变换 通过上下文的变化,可以对图像进行处理后再将其绘制到画布上 当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制. 而当我们为上下文应用变换时,会导致使用不同的 ...

随机推荐

  1. C# 高级编程05----常用修饰符

    常用修饰符: 1.访问可见性修饰符 修饰符 应用于 说明 public 类型或成员 任何代码都可访问 protected 类型或内嵌类型的成员 只有子类能访问 internal 类型或成员 只能在包含 ...

  2. IDEA启动maven项目

    一.安装IDEA 自行到官网下载,有条件请购买版权 地址:https://www.jetbrains.com/idea/ 二.修改快捷键(如果不是eclipse老用户请忽略这段) 左上角File→Sr ...

  3. js高级类型

    一.funciton数据类型 1.定义:一个function类型对象,用于管理一个具体函数. function类型相当于Java中java.lang.reflect.Method 2.函数类型对象创建 ...

  4. 语法之进化论之lambda表达式

    namespace 匿名函数 { /// <summary> /// 语法之进化论 /// </summary> class Program { delegate bool M ...

  5. 字符串正则匹配(递归/DP)

    Wildcard-Matching &  Regular Expression Matching Wildcard-Matching中?匹配任意一个字符,*匹配任意长度字符串包括空字符串 方法 ...

  6. nltk 词性解析

    转载链接: https://blog.csdn.net/pengjian444/article/details/81143983

  7. 判断 Python 版本

    if sys.version_info.major == 2: try: message = unicode(message, "utf-8") except UnicodeDec ...

  8. Ubuntu 18.04 系统配置 NPM环境和mysql数据库问题解决

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. 今天我就为大家 使用 Ubun ...

  9. C#WebApi 接口参数不再困惑:传参详解

    前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料.如今,使用WebApi也有段时间了,今天就记录下API接口传参的一些方式方法,算是一个笔记,也希望能帮初学者少走弯路.本 ...

  10. SSL/TLS抓包出现提示Ignored Unknown Record

    SSL/TLS抓包出现提示Ignored Unknown Record 出现这种提示有两种情况.第一种,抓包迟了,部分SSL/TLS的协商数据没有获取,Wireshark无法识别和解析.第二种,数据包 ...