javascript - 在 HTML Canvas 中包含文本

Question

我正在使用 html canvas，但没有丰富的经验。我从文本区域获取文本并将其输出到 html Canvas 上。效果很好，但我很难用 Canvas 包含文本，而是它只是停留在一行上并超出 Canvas 区域。

我尝试使用 maxWidth 但这似乎不起作用，我想知道是否有人有任何想法或如何实现这一目标？

我已附上输入和当前得到的结果的屏幕截图。我尝试将其放在 jsfiddle 中，但由于某种原因它无法正常工作。如果有帮助的话，您可以在这里查看 - https://jsfiddle.net/whggn6vb/3/ 。下面是我用来在 Canvas 上绘制文本的主要函数。

    function updateCanvas() {
    var maxWith = canvas.width;
       context.clearRect(0, 0, canvas.width, canvas.height);
       context.drawImage(imageObj, 0, 0);
       context.textAlign = "center";

       context.font = "bold 36px Open Sans";
       context.fillText($('#quottext').val(), canvas.width * 0.5, 100);

       context.font = "14px Open Sans";
       context.fillText($('#quotauthor').val(), canvas.width * 0.5, 200);   
}

Answer 1

嗨，如果我的理解是正确的，你应该能够使用measureText()做你需要的事情

context.measureText(txt).width

如果你选择大字体，它会显示大