HTML5帆布|當文字環繞時，文字中斷不超過最大寬度

Question

我將使用等寬字體作爲文本環繞在畫布上，我需要分割超過最大寬度的文字（不需要連字符）。我還需要將畫布上顯示的文本行數限制爲5行（從第一行開始）。

這提琴我會用什麼：http://jsfiddle.net/eECar/16/

在這種提琴，當你應用下面的文字...

todo(ctx, "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA corrupti nemo dolorem assumenda illum tempore nam iure necessitatibus unde! Fugiat, BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBquibusdam. Quia, vitae, magni, accusamus, modi doloremque dolores repudiandae expedita consectetur labore veniam minima minus in ab non aperiam ducimus iure repellendus qui cumque perferendis ad molestias porro quae dolorum amet laboriosam saepe omnis esse eum voluptatum. Facere, animi culpa accusantium eligendi voluptatum voluptatem voluptates vitae.", 12, "black"); 

...在B字符串被分裂根據爲maxWidth而造成超過了maxwidth，像這樣的時候（在「Fugiat，」新線發生）的新行：

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA corrupti nemo dolorem assumenda 
illum tempore nam iure necessitatibus unde! Fugiat, 
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBquibusdam. Quia, vitae, magni, 
accusamus, modi doloremque dolores repudiandae expedita consectetur labore 
veniam minima minus in ab non aperiam ducimus iure repellendus qui cumque 
perferendis ad molestias porro quae dolorum amet laboriosam saepe omnis esse 
eum voluptatum. Facere, animi culpa accusantium eligendi voluptatum 
voluptatem voluptates vitae. 

我想在B柱看起來像這樣：

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA corrupti nemo dolorem assumenda 
illum tempore nam iure necessitatibus unde! Fugiat, BBBBBBBBBBBBBBBBBBBBBBBB 
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
BBBBBBBBBBBBBBBBBBBBBquibusdam. Quia, vitae, magni, accusamus, modi 
doloremque dolores repudiandae expedita consectetur labore veniam minima 
minus in ab non aperiam ducimus iure repellendus qui cumque perferendis ad 
molestias porro quae dolorum amet laboriosam saepe omnis esse eum voluptatum. 
Facere, animi culpa accusantium eligendi voluptatum voluptatem voluptates 
vitae. 

提示：只有前五行文字纔會顯示在畫布上。我將使用等寬字體，所有字母和空格的寬度相同，是否會更容易處理？ Thx輸入。

更新：我設法讓長串顯示，他們應該但技術也分裂是不超過maxwidth不再言語，見http://jsfiddle.net/eECar/47/ 在我改變字體等寬，基本上改變了這種代碼的小提琴.. 。

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

..這樣：

for(j=0; result.indexOf(" ",j) !== -1; j=result.indexOf(" ",j)+35); 

... +35每行我正在收集字符長度。

我以爲我解決了它（拉丁語讓我把LOL搞砸了），但經過仔細審查後，我意識到每行最多字符數小於單詞的行數也會在行結束時分裂。任何方式保持這些單詞完好無損分裂？

Answer 1

嘗試將整個文本拆分爲單個單詞，以便您可以測試您的「特殊」AAA BB & BBB單詞。

然後，您可以以任何您想要的方式來對待這些特殊情況。

您可以將文本分成含有這樣所有單個單詞的數組：

var words = text.split(' '); 

然後你就可以趕上你的「AAA」 &「BBB」的特殊字詞和專門處理它們像這樣：

if(words[i]=="AAA" || words[i]=="BBB"){ 
    // handle these special words 
}else{ 
    // handle these non-special words 
}