DOM 和 Canvas 如何实现文字竖向排列的效果

前言

开发 H5 遇到过几回竖排文字的需求，把实现思路梳理一下。

关于竖排文字的一些需求

1. 输入框样式需作成竖排样式；
2. 使用 Canvas 生成图片供用户保存，图片中的文字方向为竖排；
3. 非汉字需与汉字垂直。

项目地址

• 项目连接：go.163.com/web/2019020…
• 或者扫码浏览：

DOM 实现文字竖排

<input> 标签没有竖排的属性，最早尝试修改 <input> 的样式来实现效果，可是效果不理想。最后使用 HTML 的 contenteditable 属性。

尝试修改 input 样式（失败）

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

关键代码

input{
    width: 30px;
    height: 250px;
    font-size: 30px;
}
复制代码

放弃缘由

• 英文字符宽度小，会出现换行失败的状况

使用 HTML 的 contenteditable 属性代替 <input> （推荐）

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

关键代码

<div contenteditable="true" style="writing-mode: vertical-lr; writing-mode: tb-lr; "></div>
复制代码

• 使用 div 代替 input
• 使用 contenteditable 属性使 div 可编辑
• 使用 CSS 的 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; // 计算文字宽度
    }
}

复制代码

推荐缘由

• 非中文自动旋转，排版更好看（实现了需求中的第三点）
• 使用 measureText() 计算字符宽度，使中英文字间距更和谐