H5 canvas填充文字自动换行

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5 canvas填充文字自动换行相关的知识，希望对你有一定的参考价值。

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

尊重别人的劳动成果,转载请注明出处.

以上是关于H5 canvas填充文字自动换行的主要内容，如果未能解决你的问题，请参考以下文章

canvas转图片中的文字自动换行

Android Place自动填充片段：无法设置文字

canvas文字自动换行圆角矩形画法生成图片手机长按保存

微信小程序 canvas 文字自动换行

delphi Canvas的TextOut如何自动换行?

canvas 文字换行