如何在html画布中创建它，处理具有可变高度的自由流动文本

Question

我需要在HTML Canvas中创建它，从我做过的研究中我一直在努力寻找它的任何有用的案例（大多数只是展示巨大视觉效果的实验）。 我已经看到了这个反应js react-canvas的项目。而且有趣 blog post

我不会使用反应我想在画布中单独执行此操作（在需要时使用任何画布库）

Answer 1

您可以使用一种功能来检查一段文字的长度：

ctx.measureText(string).width;

您可以逐行向单词添加单词，直到它变得太长，然后发布它并向下移动一行并重复。

邋small的小提琴向您展示这个概念：http://jsfiddle.net/1kqyxdd2/

编辑：上面的小提琴削减了每个传票中的最后一个字。我在这里重新制作了它：http://jsfiddle.net/1kqyxdd2/1/

c = document.getElementById("my_canvas");
ctx = c.getContext("2d");

var text = "Here's a long text that I'd like to wrap into a certain width. I really hope that my function will be able to handle this, YIKES!";

function writeText(wrapWidth,textString,x,y,fontSize,fontFamily) {
    var words = textString.split(" ");
    var tempText="";
    var currentY=y;
    ctx.font= fontSize+"pt "+fontFamily
    for (var i=0; i<words.length; i++) {
        if (ctx.measureText(tempText+" "+words[i]).width>wrapWidth) {
            ctx.fillText(tempText,x,currentY);
            currentY+=fontSize+4; //the 4 is line spacing
            tempText="";
            i--;
        }
        else {
            tempText+=" "+words[i];
        }
    }
    ctx.fillText(tempText,x,currentY);
}
writeText(200,text,50,20,15,"Arial");

<canvas id="my_canvas" width="500" height="500"></canvas>