【canvas】canvas基础使用(九):文本绘制

简言

canvas除了能够绘制图形外,也可以绘制文本。

绘制文本

fillText() 填充文本

CanvasRenderingContext2D 对象的方法 fillText() 是 Canvas 2D API 的一部分,它在指定的坐标上绘制文本字符串,并使用当前的 fillStyle 对其进行填充。存在一个可选参数,其指定了渲染文本的最大宽度,用户代理将通过压缩文本或使用较小的字体大小来实现。

此方法会直接绘制到画布上,而不会修改当前路径,因此任何后续的 fill() 或 stroke() 调用都不会对其产生影响。

文本根据 font、textAlign、textBaseline 和 direction 属性所定义的字体和文本布局来渲染。
语法:
fillText(text, x, y)
fillText(text, x, y, maxWidth)
参数:

  • text
    要作为渲染上下文的文本字符串。使用当前的 font、textAlign、textBaseline 和 direction 设置值对文本进行渲染。

  • x
    开始绘制文本的点的 X 轴坐标,单位为像素。

  • y
    开始绘制文本的基线的 Y 轴坐标,单位为像素。

  • maxWidth 可选
    文本渲染后的最大像素宽度。如果未指定,则文本宽度没有限制。但是,如果提供了该值,用户代理将调整字距,选择水平方向更紧凑的字体(如果有这种字体或可以在不降低质量的情况下生成这种字体),或缩小字体大小,以便在指定宽度内容纳文本。

示例

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90, 140);

在这里插入图片描述

strokeText() 描边文本

CanvasRenderingContext2D.strokeText() 是 Canvas 2D API 在给定的 (x, y) 位置绘制文本的方法。如果提供了表示最大值的第四个参数,文本将会缩放适应宽度。
语法:
void ctx.strokeText(text, x, y [, maxWidth]);
参数:

  • text
    使用当前 font,textAlign,textBaseline和direction 的值对文本进行渲染。

  • x
    文本起始点的 x 轴坐标。

  • y
    文本起始点的 y 轴坐标。

  • maxWidth 可选
    需要绘制的最大宽度。如果指定了值,并且经过计算字符串的宽度比最大宽度还要宽,字体为了适应会使用一个水平缩小的字体(如果通过水平缩放当前的字体,可以进行有效的或者合理可读的处理)或者小号的字体。

示例

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");ctx.font = "50px serif";
ctx.strokeText("Hello world", 50, 90);

在这里插入图片描述

measureText() 获取TextMetrics 对象

CanvasRenderingContext2D.measureText() 方法返回一个关于被测量文本TextMetrics 对象包含的信息(例如它的宽度)。
语法:
ctx.measureText(text);
参数:

  • text
    需要测量的String 。

文本TextMetrics 对象包含了文本信息的属性,例如宽度、对齐信息等。

示例

当测量一段文本的水平宽度时,由于字母倾斜/斜体导致字符的宽度可能超出其预定的宽度,因此 actualBoundingBoxLeft 和 actualBoundingBoxRight 的总和可能会比内联盒子的宽度(width)更大。

因此,计算 actualBoundingBoxLeft 和 actualBoundingBoxRight 的总和是一种更准确地获取文本绝对宽度的方法:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const text = "Abcdefghijklmnop";
ctx.font = "italic 50px serif";
const textMetrics = ctx.measureText(text);
console.log(textMetrics.width);
// 459.8833312988281
console.log(textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
);
// 462.8833333333333

结语

结束了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/820216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文解读:FREE LUNCH FOR FEW-SHOT LEARNING: DISTRIBUTION CALIBRATION

文章汇总 问题 学习到的模型很容易因为只有少数训练样本形成的有偏分布而变得过拟合。 动机 我们假设特征表示中的每个维度都遵循高斯分布,因此分布的均值和方差可以借鉴类似类的均值和方差,这些类的统计量可以通过足够数量的样本得到更好的估计。 …

11.盛最多水的容器(Java,双指针)

目录 题目描述:输入:输出:代码实现: 题目描述: 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同…

Vue - 5( 16000 字 Vue2 入门级教程)

一:Vue 初阶 1.1 组件自定义事件 在 Vue 中,组件间通过自定义事件进行通信是一种常见的模式。自定义事件允许子组件向父组件发送消息,也可以在组件内部进行事件的绑定、触发和解绑。让我们详细讲解这些知识点。 1.1.1 组件自定义事件 在 …

季节更迭 关爱不变 | 鲁南制药四季守护您的健康生活

春天,万物复苏的季节,一切都充满了生机和活力。在春日的阳光下,鲜花盛开,绿叶茂盛,鸟儿欢歌,蝴蝶翩翩起舞。我们的身体也需要特别的关爱和养护,保持健康和活力,更好地迎接每一次季节…

2924. 找到冠军 II --力扣 --JAVA

题目 一场比赛中共有 n 支队伍,按从 0 到 n - 1 编号。每支队伍也是 有向无环图(DAG) 上的一个节点。 给你一个整数 n 和一个下标从 0 开始、长度为 m 的二维整数数组 edges 表示这个有向无环图,其中 edges[i] [ui, vi] 表示图中…

知识跟踪模型GraphKT

1 知识跟踪Knowledge Tracing的概念 知识跟踪可以用来解决自适应学习问题。如何通过与教学材料的在线互动来有效地跟踪学生的学习进展?知识跟踪可用于量化学生的知识状态,即对教材所涉及的技能掌握水平。用于评估和模拟学生随着时间推移对技能的认知掌握…

前端CSS讲义1

什么是 CSS? CSS 指层叠样式表 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 样式对网页中元素…

AI数字人对话之RealChar框架源码解读

零.功能介绍 与虚拟角色(非形象)进行文本或语音会话 体验地址:RealChar. 代码库:GitHub - Shaunwei/RealChar: 🎙️🤖Create, Customize and Talk to your AI Character/Companion in Realtime (All in One Codebase!). Have a natural seamless conversation with AI…

Java基础知识总结(55)

(2) ArrayList和LinkedList的区别 1、ArrayList和LinkedList都实现了List接口2、ArrayList和LinkedList都是非线程安全的,因此在多线程环境下可能会出现出现不同步的情况3、ArrayList底层实现是数组,LinkedList底层实现是双向链表…

姿态估计-人脸识别mesh-3d手势识别-3d目标检测-背景分割-人脸关键点

往期热门博客项目回顾:点击前往 计算机视觉项目大集合 改进的yolo目标检测-测距测速 路径规划算法 图像去雨去雾目标检测测距项目 交通标志识别项目 yolo系列-重磅yolov9界面-最新的yolo 姿态识别-3d姿态识别 深度学习小白学习路线 AI健身教练-引体向上…

字节8年经验之谈 —— 聊一聊自动化测试为什么很难落地!

聊一聊自动化测试为什么很难落地 在软件开发和质量保障的领域,测试是确保软件质量的关键环节。自动化测试是一种利用脚本和工具自动执行测试用例的方法,可以提高测试效率、减少人工错误,并支持持续集成和交付。自动化测试作为提高测试效率和…

企业图纸管理软件,企业图纸管理软件有哪些推荐?

企业图纸管理软件是一种专门用于组织、存储、管理和共享企业图纸及相关文档的工具。这类软件可以帮助企业实现图纸的集中化、规范化管理,提高工作效率,降低管理成本。 企业图纸管理软件的核心功能通常包括以下几个方面: 集中化管理&#xff1…

视频识别实现智能公共安防监控

在公共安防领域,以视频监控、楼宇对讲、防盗报警、出入口控制应用最为广泛。其中,视频监控是公共安防领域的核心。通过智能视频识别技术,可以实现自动化的人物身份识别、人物行为分析、人脸识别、车辆识别、突发事件识别等功能。 在公共安防…

bestvike --bvframe学习

ref title fetch后台api 分页属性,pagination 要差几条?pagelimit 在api中写一个饭方法,vue中用用他 vue.cinfig.js中配置别名 nacos微服务 实体类要继承basedata(封装了公共数据) 控制器autowired,getm…

亚信安慧AntDB:实时数据洞察的利器

AntDB数据库以其独特的创新能力在分布式数据库领域引领潮流。其中,融合统一与实时处理是其两大核心创新能力,为其赢得广泛关注与赞誉。融合统一意味着AntDB能够将多种不同类型的数据库融合为一体,实现数据的统一管理与处理,极大地…

2024年第十五届蓝桥杯研究生组题目总结(Java、Python、C++)

2024年十五届蓝桥杯研究生组 今年的题较去年难度降低了很多,题量也少了2道。 Q1 劲舞团 读文件,找到最长的满足条件的子数组的长度 答案是:9 BufferedReader,fopen,open Q2 召唤数学精灵 找规律,周期…

C语言题目:A+B for Input-Output Practice (II)

题目描述 The first line integer means the number of input integer a and b. Your task is to Calculate a b. 输入格式 Your task is to Calculate a b. The first line integer means the numbers of pairs of input integers. 输出格式 For each pair of input in…

lua 环境安装

下载地址: https://luabinaries.sourceforge.net/download.html 安装环境变量 检查一下是否安装成功,有版本号,打印一句话,如下表示成功 idea 安装插件,方便编写lua脚本 配置一下idea 运行测试 local function m…

【C++风云录】深入了解STL、Boost.Graph和Google Test:发掘C++中的工具之力

进阶高手之路:探索C中的STL、Boost.Graph和Google Test绝技 前言 C是一种强大的编程语言,为开发人员提供了广泛的工具和库。在这些工具中,STL(Standard Template Library)、Boost.Graph和Google Test被广泛应用于不同…

Linux的重要命令(二)+了解Linux目录结构

目录 一.Linux的目录结构 二.查看文件内容命令 1.cat 命令 2.more 命令 3.less 命令 4.head 命令 5.tail 命令 6.拓展 head 和 tail 的其他用法 ​编辑 三.统计文件内容的命令-wc ​编辑 四.检索和过滤文件内容的命令-grep ​编辑 ​编辑 五.压缩命令 gzip 和 bz…