html+canvas+输入文字换行,HTML5 canvas 绘制的文字如何换行？

川长思鸟来 2022-10-06 11:44 339阅读 0赞

HTML5 里的 canvas 元素是一个图形容器，我们可以通过 JavaScript 来控制它绘制各种文本和图像。

在使用 canvas 绘制某字符串的时候，我们可能想要让该字符串在某处按要求换行。

这该怎么实现呢？

你是不是想到了 JavaScript 里的转义字符 “\\n” (换行符)？

在字符串里加入 “\\n” 在绘制时会有换行效果吗？让我们试一试：

example.html

Example

main.js

var c = document.getElementById("canvas");

var context = c.getContext("2d");

function draw()\{

context.font = "20px Arial";

context.fillStyle = "black";

context.textBaseline = "middle";

context.fillText("Hello, World!\\nWhat a nice day.",0,10);

\}

draw();

效果如图

![73903b7b5a1d1381330db60fe8ee87f9.png][]

可以发现，文字并没有换行

接下来，让我们来对比一下，看看加不加“\\n”对文字绘制有没有影响

将draw()函数里的代码改动一下：

function draw()\{

context.font = "20px Arial";

context.fillStyle = "black";

context.textBaseline = "middle";

context.fillText("Hello, World!What a nice day.",0,10);

context.fillText("Hello, World!\\nWhat a nice day.",0,30);

\}

对比效果如图

![8af62b4f3bd182dafa60487eb7f2626c.png][]

上面的是没加 “\\n” 的效果，下面是加了 “\\n” 的效果

看起来上下两个的效果就差了一个空格而已。这个空格哪来的？

其实，这个不是空格，而是 canvas 无法显示这个换行符，而显示出的一个占位符

为什么输入 “\\n” 从没法换行呢？

我个人觉得，是因为浏览器无法知道你的下一行字符串的起始坐标应该在哪

没有现成的，没关系，我们可以自己自己动手创造一个

/\*\*\*\*绘制自动换行的字符串\*\*\*\*/

function drawText(t,x,y,w)\{

var chr = t.split("");

var temp = "";

var row = \[\];

context.font = "20px Arial";

context.fillStyle = "black";

context.textBaseline = "middle";

for(var a = 0; a < chr.length; a++)\{

if( context.measureText(temp).width < w )\{

;

\}

else\{

row.push(temp);

temp = "";

\}

temp += chr\[a\];

\}

row.push(temp);

for(var b = 0; b < row.length; b++)\{

context.fillText(row\[b\],x,y+(b+1)\*20);

\}

\}

把这个函数加进main.js里，然后再往draw()函数加上一行：

drawText("Hello, World!What a nice day.",0,30,110);

效果看起来还不错：

![c354cad9dd370dd41af258e89e05889d.png][]

这是怎么做到的呢？

其实不难。简单来说，就是将需要换行的字符串用split方法分割成一个以单个字符为元素的数组，然后将该数组的每个元素(也就是每个字符)依次拼接成一个临时字符串，然后测量临时字符串的长度。如果临时字符串的长度大于等于规定长度，就把该临时字符串看做一行，然后将剩下的字符继续拼接；否则就继续拼接，直至字符全部拼接完毕。最后，将每行的字符串以一定间隔按顺序输出，就实现了换行的效果。

上面的drawText()函数还有很多可以完善的地方，大家可以根据要求自行改良

原创文章，未经允许，不得转载，谢谢大家

[73903b7b5a1d1381330db60fe8ee87f9.png]: /images/20221005/ea09d2a699de4f49bf363b24d88353bf.png
[8af62b4f3bd182dafa60487eb7f2626c.png]: /images/20221005/9dc06ebd27b1405686fd6c5b6f60ab82.png
[c354cad9dd370dd41af258e89e05889d.png]: /images/20221005/af459ba92fd5414aa5178602836af6af.png

发表评论取消回复

表情：

评论列表（有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas合成文字以及对文字进行换行处理

代码已上传至github github代码地址：https://github.com/Miofly/mio.git <!DOCTYPE html> <h

桃扇骨/ 2023年03月13日 03:22/ 0 赞/ 40 阅读

相关 vue 创建canvas画板制作图片和文字，支持文字自动换行

canvas文档：https://www.runoob.com/jsref/dom-obj-canvas.html 创建画板、图片、文字、自动换行都是分开方法，可以灵活调用

落日映苍穹つ/ 2023年03月12日 07:13/ 0 赞/ 7 阅读

相关 Android的xml的文字进行换行,string.xml文字换行

如果只是在xml里的话，在文字中间加上 \\n 就可以了示例; <TextView android:layout_width="matc

我会带着你远行/ 2022年10月11日 12:18/ 0 赞/ 423 阅读

相关 html+canvas+输入文字换行,HTML5 canvas 绘制的文字如何换行？

HTML5 里的 canvas 元素是一个图形容器，我们可以通过 JavaScript 来控制它绘制各种文本和图像。在使用 canvas 绘制某字符串的时候，我们可能想要让

川长思鸟来/ 2022年10月06日 11:44/ 0 赞/ 340 阅读

相关文字换行取消行间距

普通文字换行的时候都会造成两端文字中间有一大段间距，现在我根据调节css发现可以不存在该行间距的方法，如图： ![这里写图片描述][SouthEast] 方法：

淡淡的烟草味﹌/ 2022年06月17日 07:16/ 0 赞/ 293 阅读

相关 staruml文字换行

有两种方法开启分词支持第一种在编辑文本的时候在Format菜单中选择“Word Wrap” 在这个组件的属性中找到Format，找到“Word Wrap”选项，

喜欢ヅ旅行/ 2022年06月15日 04:10/ 0 赞/ 1005 阅读

相关移动端canvas合成图片，填充文字自动换行

今天用canvas合成带有微信公众号二维码和祝福语的春节贺卡 ![这里写图片描述][70] 由于代码都是原生的没有引入其他库，所以直接将对应部分贴出来吧。 html

骑猪看日落/ 2022年05月31日 07:45/ 0 赞/ 345 阅读

相关小程序实现canvas中文字换行

实现canvas中文字换行 const ctx = wx.createCanvasContext('shareImg'); ctx.setFontSize(1

野性酷女/ 2022年05月09日 18:28/ 0 赞/ 274 阅读

相关 staruml文字换行

有两种方法开启分词支持第一种在编辑文本的时候在Format菜单中选择“Word Wrap” 在这个组件的属性中找到Format，找到“Word Wrap”选项，

曾经终败给现在/ 2022年04月06日 06:40/ 0 赞/ 995 阅读

相关小程序Canvas文字自动换行

不废话了，在网上找轮子，找到的都是缺胳膊少腿的，干脆自己写了。以下是demo function text (msg, fontSize, maxWidht, text

系统管理员/ 2021年10月01日 10:22/ 0 赞/ 455 阅读