包含HTML Canvas中的文本

Question

我正在使用html canvas并且没有大量的使用经验。我从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);   
}

Answer 1

嗨，如果我说得对，你应该能够用measureText（）

做你需要的

context.measureText（TXT）.WIDTH

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