绘制文本

同样的,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. CSS 屏幕大小自适应

    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法:  @medi ...

  2. Jmeter(1)介绍

    JMeter是什么东西 Jmeter(Apache JMeter)是一个100%基于JAVA的应用程序,它的功能是 分析和衡量 web应用程序和各种服务的性能和负载能力 Jmeter不是一个浏览器,它 ...

  3. FSBPM 开发过程中一些提醒备注信息(供参考)

    ------智能OA系统开发过程中 前端开发前端 搜索查询的配置 运算操作符:   like         equals     共两种筛选数据方式. html标签上配置一下eg: <inpu ...

  4. c++ 开源库介绍和安装

    1 BLAS库 BLAS(Basic Linear Algebra Subprograms)是一组线性代数计算中通用的基本运算操作函数集合.BLAS Technical (BLAST) Forum负责 ...

  5. 编译phoneix源码,整合Hbase

    Hbase版本:1.2.0-cdh5.14.0 1):下载phoneix源码 链接:https://pan.baidu.com/s/1uryK_jLEekdXV04DRc3axg 密码:bkqg 2) ...

  6. redis 实现

    /** * Returns a string containing the string representation of each of {@code parts}, using the * pr ...

  7. python 配置文件__ConfigParser

    基础读取配置文件 -read(filename)               直接读取文件内容 -sections()                      得到所有的section,并以列表的形 ...

  8. Unity3D核心类介绍

    脚本介绍与Unity核心类介绍 -------------------------------------------------------------------------------- 脚本介 ...

  9. SQL Server Governer 控制资源的使用

    --- Create a resource pool for production processing  --- and set limits.  USE master;  GO  CREATE R ...

  10. leetcode刷题11. 盛最多水的容器

    做题连接https://leetcode-cn.com/problems/container-with-most-water/submissions/ 本题分为两种方法: 暴力法: int maxAr ...