canva怎么加竖版文字_DOM 和 Canvas 如何实现文字竖向排列的效果

本文介绍了如何使用DOM的contenteditable属性和Canvas API来实现文字竖向排列的效果,包括处理英文字符与汉字的竖排,以及解决换行问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

输入框样式需做成竖排样式;

使用 Canvas 生成图片供用户保存,图片中的文字方向为竖排;

非汉字需与汉字垂直。

项目地址

DOM 实现文字竖排

标签没有竖排的属性,最先尝试修改 的样式来实现效果,但是效果不理想。最后使用 HTML 的 contenteditable 属性。

尝试修改 input 样式(失败)

想通过限定 输入框的宽度 与 文字的大小 ,让文字自动换行。

关键代码

input{

width: 30px;

height: 250px;

font-size: 30px;

}

复制代码

放弃原因

英文字符宽度小,会出现换行失败的情况

使用 HTML 的 contenteditable 属性代替 (推荐)

HTML 的 contenteditable 属性规定元素内容是否可编辑。

关键代码

复制代码

contenteditable

writing-mode

使用原因

非中文自动旋转,排版更好看(实现了需求中的第三点)

Canvas 实现文字竖排

Canvas 同样没有竖排文字的属性,我通过遍历文字的方式进行绘制。

关键代码

let name; // 文本内容

let x = 657,y=170; // 文字开始的坐标

let letterSpacing = 10; // 设置字间距

for(let i = 0; i < this.name.length; i++){

const str = this.name.slice(i,i+1).toString();

if(str.match(/[A-Za-z0-9]/)&&(y<576)){ // 非汉字 旋转

ctx.save();

ctx.translate(x,y);

ctx.rotate(Math.PI/180*90);

ctx.textBaseline = 'bottom';

ctx.fillText(str,0,0);

ctx.restore();

y+=ctx.measureText(str).width+letterSpacing; // 计算文字宽度

}else if(str.match(/[\u4E00-\u9FA5]/)&&(y<576)){

ctx.save();

ctx.textBaseline = 'top';

ctx.fillText(str,x,y);

ctx.restore();

y+=ctx.measureText(str).width+letterSpacing; // 计算文字宽度

}

}

复制代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值