如何在 HTML 画布中自动换行

1、前言

尽管向 HTML 画布添加文本非常常见,但没有内置的换行功能。这意味着如果我们的文本太长,文本将跑到最后。以下面的示例为例,其中文本应该是“您好,此文本行很长。它会溢出来”。由于它太长而无法放入画布,因此它只是溢出而没有换行符:

示例的代码:

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let grd 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML 画布上写字并换行可以使用 `fillText()` 方法和 `textAlign` 属性来实现。下面是一个示例代码: ```html <!DOCTYPE html> <html> <head> <title>Canvas写字换行</title> </head> <body> <canvas id="myCanvas" width="400" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var text = "这是一段需要换行的文字,换行后应该显示在下一行。"; var x = 20; // 文字起始位置的x坐标 var y = 50; // 文字起始位置的y坐标 var maxWidth = 200; // 文字的最大宽度 var lineHeight = 30; // 行高 ctx.font = "16px Arial"; // 设置字体样式和大小 ctx.fillStyle = "black"; // 设置字体颜色 ctx.textAlign = "left"; // 设置文本的对齐方式(左对齐) function wrapText(text, x, y, maxWidth, lineHeight) { var words = text.split(" "); // 将文字拆分为单词数组 var line = ""; // 当前行的文字 for (var i = 0; i < words.length; i++) { var testLine = line + words[i] + " "; var metrics = ctx.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && i > 0) { ctx.fillText(line, x, y); // 绘制当前行的文字 line = words[i] + " "; y += lineHeight; } else { line = testLine; } } ctx.fillText(line, x, y); // 绘制最后一行的文字 } wrapText(text, x, y, maxWidth, lineHeight); </script> </body> </html> ``` 这段代码会在一个宽为400px,高为200px的画布上绘制一段文字,并自动换行显示。可以根据需要调整起始位置、文字样式、行高等参数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

琴歌声声送我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值