内容简介:想通过限定HTML 的
- 输入框样式需做成竖排样式;
- 使用 Canvas 生成图片供用户保存,图片中的文字方向为竖排;
- 非汉字需与汉字垂直。
项目地址
- 项目链接: 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> 复制代码
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入门经典
[美]Curtis "Ovid" Poe / 朱允刚、韩雷、叶斌 / 清华大学出版社 / 2013-9-20 / 78.00
作为最有影响力的编程语言之一,Perl被广泛用在Web开发、数据处理和系统管理中。无论是Perl新手,还是想要加强自己实战技能的Perl程序员,《Perl入门经典》都提供了处理日常情况所需的各种技术。凭借十多年的Perl经验,作者Curtis“Ovid”Poe一开始先简单回顾了Perl的基础知识,然后以此为出发点,举例说明了Perl在工作场所中的各种真实用法。此外,书中还包含了一些动手练习、宝贵建......一起来看看 《Perl入门经典》 这本书的介绍吧!