新手学做网站优化,建网站做商城个体户资质可以,网站前端程序制作开发,jpress与wordpresscanvas实现文字自动换行#xff0c;段落居中,单行的时候居中方法#xff0c;主要用到以下方法#xff1a;
/****绘制自动换行的字符串****///ctx_2d getContext(2d) 对象 //lineheight 段落文本行高 //bytelength 设置单字节文字一行内的数量 …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.length17 istrue1){ctx_2d.textAligncenter;}else{if(istrue1){ctx_2d.textAlign;startleft130;} }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.length17 istrue1){ctx_2d.textAligncenter; }else{if(istrue1){ctx_2d.textAlign;startleft130;} }
此判断文字个数是否达到指定个数达到的话就移除textAligncenter文字居中属性否则就增加textAligncenter属性并设置距离y轴距离。
