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

栏目: Html5 · 发布时间: 5年前

内容简介:想通过限定HTML 的
  1. 输入框样式需做成竖排样式;
  2. 使用 Canvas 生成图片供用户保存,图片中的文字方向为竖排;
  3. 非汉字需与汉字垂直。
DOM 和 Canvas 如何实现文字竖向排列的效果

项目地址

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>
复制代码
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; // 计算文字宽度
    }
}

复制代码

以上所述就是小编给大家介绍的《DOM 和 Canvas 如何实现文字竖向排列的效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Perl高效编程

Perl高效编程

霍尔 / 胜春、王晖、张东亮、蒋永清 / 人民邮电出版社 / 2011-5 / 65.00元

《Perl高效编程(第2版)》,本书是Perl编程领域的“圣经级”著作。它提供了一百多个详实的应用案例,足以涵盖编程过程中经常遇到的方方面面,由此详细阐释出各种高效且简洁的写法。一起来看看 《Perl高效编程》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具