canvas文本自動換行

在用canvas中寫刮獎結果的時候發現canvas中的文本不會自動折行，要進行截斷另起一行來寫。在此參考文章html5-canvas的繪制文本自動換行來做改寫。

根據canvas寬度來做折行

在此根據項目的情況讓文本占canvas的八分之五，具體可以根據情況改變所占百分比來顯示。

/*
str:要繪制的字符串
canvas:canvas對象
initX:繪制字符串起始x坐標
initY:繪制字符串起始y坐標
lineHeight:字行高
*/
function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
    var ctx = canvas.getContext("2d"); 
    var lineWidth = 0;
    var canvasWidth = c.width; 
    var lastSubStrIndex= 0; 
    for(let i=0;i<str.length;i++){ 
        lineWidth+=ctx.measureText(str[i]).width; 
        if(lineWidth>canvasWidth/8*5){
            ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
            initY+=lineHeight;
            lineWidth=0;
            lastSubStrIndex=i;
        } 
        if(i==str.length-1){
            ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
        }
    }
  }

 根據字節數來做折行

參考文章canvas文本換行處理。

調用：

var my_cvs = document.getElementById("my_cvs");
var ctx_2d = my_cvs.getContext("2d");
writeTextOnCanvas(ctx_2d,30,24,'文字內容文字內容文字內容文字內容',182,607);

函數：

//ctx_2d        getContext("2d") 對象  
//lineheight    段落文本行高  
//bytelength    設置單字節文字一行內的數量  
//text          寫入畫面的段落文本  
//startleft     開始繪制文本的 x 坐標位置（相對於畫布）  
//starttop      開始繪制文本的 y 坐標位置（相對於畫布）  
function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop){  
    function getTrueLength(str){//獲取字符串的真實長度（字節長度）  
        var len = str.length, truelen = 0;  
        for(var x = 0; x < len; x++){  
            if(str.charCodeAt(x) > 128){  
                truelen += 2;  
            }else{  
                truelen += 1;  
            }  
        }  
        return truelen;  
    }  
    function cutString(str, leng){//按字節長度截取字符串，返回substr截取位置  
        var len = str.length, tlen = len, nlen = 0;  
        for(var x = 0; x < len; x++){  
            if(str.charCodeAt(x) > 128){  
                if(nlen + 2 < leng){  
                    nlen += 2;  
                }else{  
                    tlen = x;  
                    break;  
                }  
            }else{  
                if(nlen + 1 < leng){  
                    nlen += 1;  
                }else{  
                    tlen = x;  
                    break;  
                }  
            }  
        }  
        return tlen;  
    }  
    for(var i = 1; getTrueLength(text) > 0; i++){  
        var tl = cutString(text, bytelength);  
        ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);  
        text = text.substr(tl);  
    }  
}