HTML5 Canvas中的文字換行

我試圖用HTML5 Canvas換行，但我很掙扎！HTML5 Canvas中的文字換行

我已經創建了一個TextTyper對象，它將管理多行文字包裝文字。

我遇到的問題是我得到一個無限循環！

我需要一個使用純JavaScript（無jQuery）和HTML5 Canvas的解決方案。

我做了一個的jsfiddle幫助解決自己的問題，並測試不同的策略：http://jsfiddle.net/Jamesking56/eECar/

這裏是我的TextTyper對象至今：

function TextTyper(text, x, y, font, colour) 
{ 
    this.text = text || ""; 
    this.x = x || 20; 
    this.y = y || 20; 
    this.font = font || false; 
    this.colour = colour || [0, 0, 0]; 
    this.lines = 0; 

    // Calculate and draw the lines 
    this.draw = function() 
    { 
     canvas.width = canvas.width; 

     var maxWidth = (canvas.width - 40); 

     var words = this.text.split(' '); 
     var line = [words[0]]; //begin with a single word 

     for (var i = 1; i < words.length; i++) 
     { 
      while (ctx.measureText(line.join(' ')) < maxWidth && i < words.length - 1) 
      { 
       line.push(words[i++]); 
      } 

      if (i < words.length - 1) 
      { 
       //Loop ended because line became too wide 
       line.pop(); //Remove last word 
       i--; //Take one step back 
      } 
      this.lines++; 
     } 
    } 
}

什麼想法？

來源

2013-04-25 Jamesking56

用您的開發人員工具瀏覽您的代碼，您應該發現問題。 – 2013-04-25 17:11:43

'ctx.measureText'返回一個新的'TextMetrics'對象，而不是實際的寬度。您可能必須將其更改爲'ctx.measureText（...）.width'。另外，如果在統計完一行後，你從不清空「行」，你期望如何衡量一個新範圍的單詞的寬度？ – Rikonator 2013-04-25 17:31:36

好了，這是我用我的HTML5遊戲：http://jsfiddle.net/eECar/16/

while (text.length) { 
    for(i=text.length; ctx.measureText(text.substr(0,i)).width > max_width; i--); 

    result = text.substr(0,i); 

    if (i !== text.length) 
     for(j=0; result.indexOf(" ",j) !== -1; j=result.indexOf(" ",j)+1); 

    lines.push(result.substr(0, j|| result.length)); 
    width = Math.max(width, ctx.measureText(lines[ lines.length-1 ]).width); 
    text = text.substr(lines[ lines.length-1 ].length, text.length); 
}

希望它能幫助。

來源

2013-04-25 17:43:27

HTML5 Canvas中的文字換行

回答

相關問題