एचटीएमएल 5 में वर्ड रैपिंग कैनवास

Question

मैं एचटीएमएल 5 कैनवास में शब्द लपेटने की कोशिश कर रहा हूं लेकिन मैं संघर्ष कर रहा हूं!

मैंने एक टेक्स्टटाइप ऑब्जेक्ट बनाया है जो शब्द लिपटे पाठ की कई पंक्तियों का प्रबंधन करेगा।

मेरी समस्या यह है कि मुझे अनंत लूप मिल रहा है!

मुझे एक ऐसे समाधान की आवश्यकता है जो शुद्ध जावास्क्रिप्ट (कोई jQuery नहीं) और HTML5 कैनवास का उपयोग करे। 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++; 
     } 
    } 
} 

किसी भी विचार

मैं मदद करने के लिए मेरी समस्याओं का समाधान और विभिन्न रणनीतियों का परीक्षण एक JSFiddle कर दिया है?

Answer 1

खैर, यह क्या मैं अपने एचटीएमएल 5 खेल में प्रयोग किया जाता है: 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); 
} 

आशा है कि यह मदद करते हैं।