Canvas:绘制文本
基础
画布除了绘制图形以外还可以绘制文本,画布中的文本可以设置字体大小、字体格式、对齐方式(横向和纵向对齐方式),并且还可以制作很炫酷的文本,比如渐变文字。
文本有以下三个属性,控制文本的字体大小、字体格式和对齐方式:
属性 | 描述 |
---|---|
font | 设置或返回文本内容的当前字体属性 |
textAlign | 设置或返回文本内容的当前对齐方式 |
textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
完成文本的绘制有 fillText 和 strokeText:
方法 | 描述 |
---|---|
fillText(text, x, y) | 在画布上绘制有填充文本 |
strokeText(text, x, y) | 在画布上绘制无填充文本 |
measureText(text) | 返回包含指定文本宽度对象 |
方法
fillText
fillText 用于绘制非镂空的文本,即文字是完全填充的:
ctx.beginPath();
ctx.font = '25px Georgia';
ctx.fillText('Hello World!', 150, 150);
strokeText
strokeText 用于绘制镂空的文本:
ctx.beginPath();
ctx.font = '25px Georgia';
ctx.strokeText('Hello World!', 150, 150);
属性
textAlign
文本对于 Y 轴的对齐方式,用 textAlign 设置,有以下五个属性值:
属性值 | 描述 |
---|---|
left | 文字左对齐 |
center | 文字中间对齐 |
right | 文字右对齐 |
start | 文字左对齐,与 left 等效 |
end | 文字右对齐,与 right 等效 |
ctx.font = '15px Georgia';
ctx.beginPath()
ctx.textAlign = 'start'; // 文字左对齐,与 left 等效
ctx.fillText('(start)Hello World!', 150, 20);
ctx.beginPath()
ctx.textAlign = 'left'; // 文字左对齐,与 start 等效
ctx.fillText('(left)Hello World!', 150, 80);
ctx.beginPath()
ctx.textAlign = 'center'; // 文字句中对齐
ctx.fillText('(center)Hello World!', 150, 140);
ctx.beginPath()
ctx.textAlign = 'end'; // 文字右对齐,与 right 等效
ctx.fillText('(end)Hello World!', 150, 200);
ctx.beginPath()
ctx.textAlign = 'right'; // 文字右对齐,与 end 等效
ctx.fillText('(right)Hello World!', 150, 260);
textBaseline
textAlign 代表文本以 Y 轴的对齐方式,textBaseline 就是文本以 X 轴的对齐方式,同样也有五个属性值,也有两个属性值互为等效:
属性值 | 描述 |
---|---|
top | 位于 Y 轴的下面,顶在 Y 轴 |
bottom | 位于 Y 轴的上面,文本底部与 Y 轴贴合 |
middle | 位于 Y 轴的中间,Y 轴穿过文本 |
alphabetic | 与 bottom 等效 |
hanging | 与 top 等效 |
Canvas:绘制文本的更多相关文章
- canvas绘制文本
canvas绘制文本 属性和方法 font = value 设置字体 textAlign = value 设置字体对齐方式 start, end, left, right, center textBa ...
- canvas 绘制文本
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- canvas绘制文本自动换行
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- HTML5 canvas绘制文本
demo.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...
- FontMetrics ----- 绘制文本,获取文本高度
Canvas 绘制文本时,使用FontMetrics对象,计算位置的坐标. public static class FontMetrics { /** * The maximum distance a ...
- html5 canvas 笔记三(绘制文本和图片)
绘制文本 fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...
- Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...
- canvas绘制文字
绘制字体时可以使用fillText方法或者strokeText方法. fillText方法用填充的方式来绘制字符串 context.fillText (text, x,y,[maxwidth]); s ...
- html5 canvas绘制圆形印章,以及与页面交互
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas 绘制图形
canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
随机推荐
- 【大数据面试】【框架】kafka:组成、台数/参数配置、持久化、ISR队列、宕机、丢数据、重复数据、数据积压、优化各种配置(刷盘、存盘、副本、压缩)、zk、其他
一.基本信息 1.组成 生产者 broker 消费者 zookeeper:brokerid.consumer信息(不包含生产者的信息) 2.需要安装多少台 2 * (生产者的峰值生产速率 * 副本 / ...
- C#多线程(四)并行编程篇之结构化
前言 在前三章中我们的案例大量使用到了Thread这个类,通过其原始API,对其进行创建.启动.中断.中断.终止.取消以及异常处理,这样的写法不仅不够优雅(对接下来这篇,我称其为.NET现代化并行编程 ...
- python 之集合(set)
集合是一个无序的,不允许重复的元素列表,根据这个特性,可以利用集合对列表进行去重操作 集合创建 # 集合中不能含list.dict set2 = {"rice", 1, (True ...
- CentOS7下搭建JumpServer
JumpServer 部署架构图 JumpServer 功能架构图 JumpServer 是广受欢迎的开源堡垒机,是符合 4A 规范的专业运维安全审计系统. JumpServer 使用 Python ...
- ArcGIS工具 - 导出数据库结构
为了保证数据的一致性,数据库结构的正确性在数据库建设和管理过程中显示十分重要,在各个地理信息类项目的技术规定中都对空间数据库的结构进行明确和详细的定义,有时为了方便检查或文档编辑需要将数据结构导出,为 ...
- S2-016 CVE-2013-2251
漏洞名称 S2-016(CVE-2013-2251) 通过操作前缀为"action:"/"redirect:"/"redirectAction:&qu ...
- 【Machine Teaching】An Overview of Machine Teaching
Machine Teaching 1 Introduction 1️⃣ 什么是 Machine Teaching? searching the optimal (usually minimal) te ...
- Linux C 打印变量数组内容到一个文件中的方法。
思路: 1.以追加的方式新建打开一个文件 2.将buf 按字节,先将整型转换为字符串,之后写入到文件中. memset(tmp_buf, 0, sizeof(tmp_buf)); sprintf(tm ...
- Codeforces Round #601 (Div. 2) A-E
比赛链接 A 题意 给两个数字 \(a,b\) ,每次操作可以使 \(a\) 加上 \(+1,+2,+5,-1,-2,-5\) 中的一个数,求最少多少次操作可以将 \(a\) 变成 \(b\) . 题 ...
- Failed to find "GL/gl.h" in "/usr/include/libdrm"
环境qt5.12.3 deepin15.10 使用cmake构建项目时报错,网上查询了一下发现时未安装opengl,于是安装便是了 sudo apt install mesa-common-dev 问 ...