canvas文本绘制自动换行、字间距、竖排等实现(3)_H5之家

在CSS中，我们可以使用 writing-mode 改变文档流的方向，从而实现文字竖排，相关文章可以参见我之前的文章：“ 改变CSS世界纵横规则的writing-mode属性 ”，或者购买我的《CSS世界》，其中有详细介绍。

那在canvas中又该如何实现呢？

1. JS混合计算逐字排列

混合计算规则如下：全角字符竖排，英文数字等半角字符旋转排列。

下面是我扩展的竖排方法，同样MIT协议，可随意使用，保留上面一段作者和出处说明即可。

/** * @author zhangxinxu(.com) * @licence MIT * @description ?p=7362 */ CanvasRenderingContext2D.prototype.fillTextVertical = function (text, x, y) { var context = this; var canvas = context.canvas; var arrText = text.split(''); var arrWidth = arrText.map(function (letter) { return context.measureText(letter).width; }); var align = context.textAlign; var baseline = context.textBaseline; if (align == 'left') { x = x + Math.max.apply(null, arrWidth) / 2; } else if (align == 'right') { x = x - Math.max.apply(null, arrWidth) / 2; } if (baseline == 'bottom' || baseline == 'alphabetic' || baseline == 'ideographic') { y = y - arrWidth[0] / 2; } else if (baseline == 'top' || baseline == 'hanging') { y = y + arrWidth[0] / 2; } context.textAlign = 'center'; context.textBaseline = 'middle'; // 开始逐字绘制 arrText.forEach(function (letter, index) { // 确定下一个字符的纵坐标位置 var letterWidth = arrWidth[index]; // 是否需要旋转判断 var code = letter.charCodeAt(0); if (code <= 256) { context.translate(x, y); // 英文字符，旋转90° context.rotate(90 * Math.PI / 180); context.translate(-x, -y); } else if (index > 0 && text.charCodeAt(index - 1) < 256) { // y修正 y = y + arrWidth[index - 1] / 2; } context.fillText(letter, x, y); // 旋转坐标系还原成初始态 context.setTransform(1, 0, 0, 1, 0, 0); // 确定下一个字符的纵坐标位置 var letterWidth = arrWidth[index]; y = y + letterWidth; }); // 水平垂直对齐方式还原 context.textAlign = align; context.textBaseline = baseline; };

API名称是 fillTextVertical ，语法如下：

CanvasRenderingContext2D.fillTextVertical(text, x, y)

其中 text , x , y 3个参数和 fillText() 方法中的这3个参数含义是一样的，不赘述。

实现的效果是：英文数字等旋转，中文垂直排列。支持 textAlign 和 textBaseline 等基本设置。

您可以狠狠地点击这里： canavs文本竖排JS逐字计算实现demo

使用JS如下：

var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); context.font = '24px STKaiti, sans-serif'; context.textAlign = 'center'; context.textBaseline = 'top'; context.fillTextVertical('anglebaby和黄晓明', canvas.width / 2, 0);

结果如下图所示：

2. 借助SVG <foreignObject>直接把CSS效果绘制上去

和自动换行实现类似，详细略。

五、结束语

当年CSS之所以一统天下就是在文本展现文字排版这一块非常方便。

看看SVG的文本展现，在看看canvas的文本呈现，难用的很。全靠友军衬托啊！

问题来了，CSS文本呈现这里厉害，那还需要canvas干什么？

因为canvas可以方便把文字转换成图片，例如一些广告工具等等，需要前端合成的，就需要canvas大放异彩了。

本文扩展的这些方法并未实际项目大规模验证，有疏漏之处在所难免，欢迎指正！

分享给小伙伴们：

本文标签： canvas，自动换行，字间距/">canvas，自动换行，字间距

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻