canvas实现文字自动换行,段落居中,单行的时候居中

27天前   阅读:187   分类:前端    标签: canvas

canvas实现文字自动换行,段落居中,单行的时候居中方法,主要用到以下方法:

/****绘制自动换行的字符串****/
    //ctx_2d        getContext("2d") 对象  
    //lineheight    段落文本行高  
    //bytelength    设置单字节文字一行内的数量  
    //text          写入画面的段落文本  
    //startleft     开始绘制文本的 x 坐标位置(相对于画布)  
    //starttop      开始绘制文本的 y 坐标位置(相对于画布)  
    //ctx_fillStyle      字体颜色
    //ctx_font      字体
    //istrue 是否设置
    function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop,ctx_fillStyle,ctx_font,istrue){  
        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;  
        }  
        if(text.length<17 && istrue==1){
        	ctx_2d.textAlign="center";
            
        }else{
        	if(istrue==1){
        		ctx_2d.textAlign="";
        		startleft=130;
        	}			
        }
        for(var i = 1; getTrueLength(text) > 0; i++){  
            var tl = cutString(text, bytelength); 
            ctx_2d.fillStyle= ctx_fillStyle; //字体颜色
            ctx_2d.font= ctx_font; //字体 
            ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop); 
            
            text = text.substr(tl);  
        }  
    }

调用方法:

let canvas = document.createElement('canvas')
canvas.width = "608"
canvas.height = "1080"  //创建画布,并设置宽高
let ctx = canvas.getContext("2d")
var ctName = "我是文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字"
// 对象 - 行高  - 文字一行内的数量  -文本 - x 坐标位置 -y
writeTextOnCanvas(ctx,30,500,ctName,263,979,'#fff','normal 18px Microsoft YaHei',0);  //名字 +头衔

说明:这个方法采用设置文字区块的宽度,来达到文字版块居中,另一方面考虑文字不到一行的情况下,通过以下方法判断,给文字加居中选项

 if(text.length<17 && istrue==1){
    ctx_2d.textAlign="center";      
 }else{
        if(istrue==1){
        ctx_2d.textAlign="";
        startleft=130;
     }			
 }

此判断文字个数是否达到指定个数,达到的话就移除textAlign="center"文字居中属性,否则就增加textAlign="center"属性,并设置距离y轴距离。

【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/452.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

上一篇:没有更多了文章

下一篇: TP5搜索分页

文章评论(0)

登录
头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×