canvas是H5中非常重要,非常常用,也是非常強大的一個新標簽,美中不足的事,canvas中沒沒有自動換行的屬性,我的第一反應是,字符串截取,然后計算每行的距離來實現自動換行..

然后百度了一下,已經有前輩寫了個demo,在此記錄,以幫忙同樣有次困擾的道友..

html:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>filltext</title>
</head>
<body>
    <canvas id="ft" width="400" height="400" style="background-color: #000;">您的瀏覽器不支持canvas。</canvas><br>
    <textarea id="input" row="6" col="60" style="width:300px;height: 100px;">這是一段測試字符串。This is an test string.當在文本框輸入內容后會同步顯示到canvas上。這是一段測試字符串。This is an test string.當在文本框輸入內容后會同步顯示到canvas上。</textarea>
</body>
</html>

js: 

(function(){
    function writeTextOnCanvas(cns, lh, rw, text){
        var cns = document.getElementById(cns);
        var ctx = cns.getContext("2d");
        var lineheight = lh;
        var text = text;

        ctx.width = cns.width;
        ctx.height = cns.height;

        ctx.clearRect(0, 0, ctx.width, ctx.height);
        ctx.font = "16px 微軟雅黑";
        ctx.fillStyle = "#f00";
        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, rw);
            ctx.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), 10, i * lineheight + 50);
            text = text.substr(tl);
        }
    }
    writeTextOnCanvas("ft", 22, 40, document.getElementById("input").value);
    document.getElementById("input").onkeyup = function(){
        writeTextOnCanvas("ft", 22, 40, this.value);
    }
})();

同樣希望有大牛能給出更好的解決方法.

代碼出處:http://runjs.cn/detail/xr5uqeze

尊重別人的勞動成果,轉載請注明出處.