在 HTML 画布中包含文本答案

【问题标题】：Contain Text within HTML Canvas在 HTML 画布中包含文本
【发布时间】：2015-12-09 23:33:58
【问题描述】：

我正在使用 html 画布，但没有大量使用它的经验。我从 textarea 中获取文本并将其输出到 html 画布上。这很好用，但我正在努力用画布包含文本，而不是它只停留在一行上并超出画布区域。

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

我附上了输入的截图和我目前得到的结果。我尝试将它放在一个 jsfiddle 中，但由于某种原因它无法正常工作。如果有帮助，您可以在此处查看 - https://jsfiddle.net/whggn6vb/3/。下面是我用来在画布上绘制文本的主要功能。

    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);   
}

【问题讨论】：

标签： javascript jquery html canvas

【解决方案1】：

嗨，如果我说得对，你应该能够使用 measureText() 做你需要的事情

context.measureText(txt).width

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

【讨论】：

我基本上希望文本大小保持不变，但当它比画布的宽度更宽时换行。我已经尝试过 context.measureText(txt).width 但似乎对我不起作用。不过我可能做错了什么。