小程序使用Canvas设置文字竖向排列

 在需要使用的js页面引入js文件,传入对应参数即可

/**
*     文本竖向排列
*/
function drawTextVertical(context, text, x, y) {var arrText = text.split('');var arrWidth = arrText.map(function (letter) {return 26; // 字体间距,需要自定义可以自己加参数,根据传入参数进行设置});var align = context.textAlign;var baseline = context.textBaseline;if (align == 'left') {x = x + Math.max.apply(null, arrWidth) / 2;} else if (align == 'right') {x = x - Math.max.apply(null, arrWidth) / 2;}if (baseline == 'bottom' || baseline == 'alphabetic' || baseline == 'ideographic') {y = y - arrWidth[0] / 2;} else if (baseline == 'top' || baseline == 'hanging') {y = y + arrWidth[0] / 2;}context.textAlign = 'center';context.textBaseline = 'middle';// 开始逐字绘制arrText.forEach(function (letter, index) {// 确定下一个字符的纵坐标位置var letterWidth = arrWidth[index];// 是否需要旋转判断var code = letter.charCodeAt(0);if (code <= 256) {context.translate(x, y);// 英文字符,旋转90°context.rotate(90 * Math.PI / 180);context.translate(-x, -y);} else if (index > 0 && text.charCodeAt(index - 1) < 256) {// y修正y = y + arrWidth[index - 1] / 2;}context.fillText(letter, x, y);// 旋转坐标系还原成初始态context.setTransform(1, 0, 0, 1, 0, 0);// 确定下一个字符的纵坐标位置var letterWidth = arrWidth[index];y = y + letterWidth;});// 水平垂直对齐方式还原context.textAlign = align;context.textBaseline = baseline;
}module.exports = {drawTextVertical: drawTextVertical
}

示例:

引入js

 

传入参数

 

页面显示

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

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

相关文章

计算机网络学习实践:DHCP跨网段动态分配IP

计算机网络学习实践&#xff1a;DHCP跨网段动态分配IP 1.实验准备 实验环境&#xff1a;思科的模拟器 实验设备&#xff1a; 1个服务器&#xff0c;2个二层交换机&#xff08;不是三层的&#xff09;&#xff0c;4个PC机&#xff0c;1个路由器 三个网段 192.168.1.0 255.…

Android中ANR的分析和解决

一 ANR概述 2、ANR的类型 &#xff08;1&#xff09;KeyDispatchTimeout&#xff08;常见&#xff09; input事件在5S内没有处理完成发生了ANR。 logcat日志关键字&#xff1a;Input event dispatching timed out &#xff08;2&#xff09;BroadcastTimeout 前台Broadcast…

logback删除日志文件和文件夹

​​​​​一&#xff0c;事由和源码 logback版本1.2.11 网上找了很多都是无法删除文件夹的&#xff0c;原先使用的TimeBasedRollingPolicy无法删除日志的文件夹&#xff0c;有很多空的日期文件夹&#xff0c;于是查看TimeBasedRollingPolicy源码发现有校验不删除文件夹&#x…

Docker的网络管理

文章目录 一、Docker容器之间的通信1、直接互联&#xff08;默认Bridge网络&#xff09;1.1、Docker安装后默认的网络配置1.2、创建容器后的网络配置1.2.1、首先创建一个容器1.2.2、ip a 列出网卡变化信息1.2.3、查看新建容器后的桥接状态 1.3、容器内安装常见的工具1.4、容器间…

46、Flink 的 异步 I/O 算子详解

异步 I/O 1.需求 在与外部系统交互&#xff08;用数据库中的数据扩充流数据&#xff09;时&#xff0c;需要考虑与外部系统的通信延迟对整个流处理应用的影响。 同步交互&#xff1a;使用 MapFunction访问外部数据库的数据&#xff0c; MapFunction 向数据库发送一个请求然后…

揭秘京东API:一键获取商品详情的秘籍

京东作为中国领先的电子商务平台&#xff0c;不仅为消费者提供了便捷的购物体验&#xff0c;同时也为开发者提供了丰富的API接口&#xff0c;使得开发者能够方便地获取商品信息&#xff0c;实现个性化的应用开发。 在这个数字化时代&#xff0c;电子商务平台如京东&#xff0c…

高级 Go 程序设计:使用 net/http/httputil 包构建高效网络服务

高级 Go 程序设计&#xff1a;使用 net/http/httputil 包构建高效网络服务 介绍ReverseProxy 的使用基本概念实现步骤高级配置实际案例 DumpRequest 的使用功能说明代码示例应用场景NewSingleHostReverseProxy 的特性功能概述 详细教程 注意事项使用 NewChunkedWriter 实现高效…

C语言 带头双向循环链表的基本操作

带头双向循环链表的基本操作 结构体定义初始化创建新节点头插头删尾插尾删查找在指定位置之后插入删除指定位置的值打印 结构体定义 typedef int DataType; typedef struct LinkNode {DataType data;struct LinkNode* prev;struct LinkNode* next; }LNode;初始化 有两种初始化…

远控免杀篇

0x00&#xff1a;前言 随着近两年hvv和红蓝对抗以及国家对于网络安全的重视&#xff0c;国内防护水平都蹭蹭上了一个台阶&#xff0c;不管是内部人员的技术水平提高还是防护设备的层层部署&#xff0c;均给了红队人员想要进一步行动设置了障碍。 通过weblogic的cve-2019-2725获…

MLPerf storage基准测试

MLPerf 基准测试 什么是 MLPerf&#xff1f;MLPerf™ 基准测试由来自学术界、研究实验室和行业的 AI 领导者联盟 MLCommons 开发&#xff0c;旨在对硬件、软件和服务的训练和推理性能进行无偏评估。它们都在规定的条件下进行。为了保持在行业趋势的前沿&#xff0c;MLPerf 不断…

C基础-标准库上

下:http://t.csdnimg.cn/LXa0J C 标准库是一组 C 内置函数、常量和头文件&#xff0c;比如 <stdio.h>、<stdlib.h>、<math.h>&#xff0c;等等。 目录 一. assert.h 二. ctype.h 三. errno.h 四. float.h 五.limits.h 六. locale.h 一. assert.h 源码…

166.二叉树:相同的树(力扣)

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}* Tre…

【机器学习】RLHF:在线方法与离线算法在大模型语言模型校准中的博弈

RLHF&#xff1a;在线方法与离线算法在大型语言模型校准中的博弈 一、引言二、RLHF概述三、在线方法与离线算法的对比四、实验验证与代码实例 一、引言 在人工智能领域&#xff0c;大型语言模型&#xff08;LLM&#xff09;的校准已成为一个备受关注的热点。基于人类反馈的强化…

实现spring配置bean类机制

大家好&#xff0c;这里是教授.F 流程说明&#xff1a; 我们自己实现spring配置bean类的机制&#xff0c;要先了解原本是怎么实现的。 原本的机制就是有一个bean配置文件&#xff0c;还有一个ApplicationContext spring文件。bean类写着要扫描的文件信息&#xff0c;spring文…

【Python学习】数据结构+正则表达式

个人主页&#xff1a;Yang-ai-cao 系列专栏&#xff1a;Python学习 博学而日参省乎己&#xff0c;知明而行无过矣 目录 个人主页&#xff1a;Yang-ai-cao 系列专栏&#xff1a;Python学习 博学而日参省乎己&#xff0c;知明而行无过矣 数据结构 一、列表&#xff08;Lis…

风电机组与风力发电机:它们是同一个东西吗?

风电机组与风力发电机&#xff1a;它们是同一个东西吗&#xff1f; 风电机组和风力发电机是两个常见的术语&#xff0c;尤其是在可再生能源领域。虽然这两个术语有时会被混淆使用&#xff0c;但它们实际上指的是不同的设备和系统。为了弄清楚它们之间的关系&#xff0c;本文将…

最近很火的 ChatTTS项目,有大佬做的 ChatTTS-UI 来啦

地址&#xff1a;https://github.com/jianchang512/ChatTTS-ui 》》》更多开源项目 ChatTTS webUI & API 一个简单的本地网页界面&#xff0c;直接在网页使用 ChatTTS 将文字合成为语音&#xff0c;支持中英文、数字混杂&#xff0c;并提供API接口。 Releases中可下载Wi…

算法学习笔记——二进制

二进制 负数的十进制转二进制数&#xff08;-2 -> 1110&#xff09;&#xff1a; 正数 - 1&#xff0c;再取反&#xff0c;得到负数的二进制。 例如&#xff1a;-2 &#xff1a;0010 -> 0010 - 1 -> 0001 -> 取反 -> 1110 负数的二进制转十进制&#xff08;…

八-工具包2-numpy

numpy相关 概念 Numpy【Numeric Python】是python开源的科学计算工具包,支持维度数组与矩阵运算,核心能力:数组的算数和逻辑运算,傅立叶变换、用于图形操作的例程、线性代数、随机数等有关的内置函数。 NumPy 通常与 SciPy(Scientific Python)和 Matplotlib(绘图库)一…

spring中数据绑定是指什么?

在 Spring 框架中&#xff0c;数据绑定指的是将客户端发送的数据&#xff08;如 HTTP 请求中的参数&#xff09;映射或绑定到 Java 对象上的过程。这个过程大多是自动进行的&#xff0c;并涉及到类型转换和格式验证。数据绑定让开发者能够轻松地处理来自于表单提交、RESTful 请…