canvas 绘制文字自动换行

最新推荐文章于 2024-01-26 16:33:17 发布

Areca榔

最新推荐文章于 2024-01-26 16:33:17 发布

阅读量890

点赞数 1

本文介绍了一种在HTML5 Canvas上智能绘制多行文本的算法，通过计算字符串的真实长度和按字节长度截取字符串，确保文本在限定宽度内正确显示，适用于网页应用中的复杂文本布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//ctx_2d        getContext("2d") 对象  
//lineheight    段落文本行高  
//bytelength    设置单字节文字一行内的数量  
//text          写入画面的段落文本  
//startleft     开始绘制文本的 x 坐标位置（相对于画布）  
//starttop      开始绘制文本的 y 坐标位置（相对于画布）  
const 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);  
    }  
}