canvas文本自动换行
在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行,要进行截断另起一行来写。在此参考文章html5-canvas的绘制文本自动换行来做改写。
根据canvas宽度来做折行
在此根据项目的情况让文本占canvas的八分之五,具体可以根据情况改变所占百分比来显示。
/* str:要绘制的字符串 canvas:canvas对象 initX:绘制字符串起始x坐标 initY:绘制字符串起始y坐标 lineHeight:字行高 */ function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){ var ctx = canvas.getContext("2d"); var lineWidth = 0; var canvasWidth = c.width; var lastSubStrIndex= 0; for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth/8*5){ ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY); initY+=lineHeight; lineWidth=0; lastSubStrIndex=i; } if(i==str.length-1){ ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY); } } }
根据字节数来做折行
参考文章canvas文本换行处理。
调用:
var my_cvs = document.getElementById("my_cvs");
var ctx_2d = my_cvs.getContext("2d");
writeTextOnCanvas(ctx_2d,30,24,'文字内容文字内容文字内容文字内容',182,607);
函数:
//ctx_2d getContext("2d") 对象 //lineheight 段落文本行高 //bytelength 设置单字节文字一行内的数量 //text 写入画面的段落文本 //startleft 开始绘制文本的 x 坐标位置(相对于画布) //starttop 开始绘制文本的 y 坐标位置(相对于画布) function 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); } }