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

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

使用 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; // 设置字间距