我应该如何使用画布(canvas)来换行文本？

Question

我应该如何使用画布(canvas)来换行文本？

3

我正在尝试在文本行超过一定像素宽度时自动换行。我已经设置了文本，如果它超过我想要的最大宽度，它会打印到控制台上（我为测试目的而这样做），但我不知道如何让文本自动换行。有人能帮忙或指点我吗？

var text = result[0].text;
var max_text_width = 150;
ctx.font = text.font;
ctx.textAlign = text.align;
ctx.fillStyle = text.color;
for(var i = 0; i < text.fill.length; i++){
    var metrics = ctx.measureText(text.fill[i]);
    var text_width = metrics.width;
    if(text_width > max_text_width){
        ctx.fillText(text.fill[i], text.x[i], text.y[i]);
    }
    else{
        ctx.fillText(text.fill[i], text.x[i], text.y[i]);
    }
}

- user3542456

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mikko Ohtamaa · Answer 1

<canvas> 旨在用于图形，不提供非常复杂的文本打印工具。一种常见的方法是在 <canvas> 上方放置一个透明的 <div>，并使用 JavaScript DOM API 和 CSS 对文本元素进行布局（如果可行）。

如果 DOM 不可用，则有两个选项

编写自己的测试布局代码，例如从这里查看示例
有一些用于高级 <canvas> 文本操作的库，请参见 Zebra, CanvasText

然而，由于 <canvas> 缺乏准确的文本和字符跟踪和样式 API，基于 DOM 的方法将优于可用效果和渲染输出。