本文详细介绍如何处理canvas制图全过程中，drawText的换行难题，先看1个大伙儿平常在canvas绘图文字都会遇到的难题：
1个150*100的canvas画布，加个边框显著界限
<canvas id="canvas" style="border:solid 1px darkgoldenrod;" width="200px" height="100px"></canvas>
大家先看来fillText()方式，strokeText()方式同理
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#E992B9";
ctx.lineWidth=1;
var str = "倘若日常生活蒙骗了你，请不必忧伤！thank you!"
ctx.fillText(str,0,20);
能够看到fillText()在固宽的canvas中，篇幅过量的情况下，其实不会全自动换行，大家能够提升canvas自身的宽度，但这并不是处理难题的压根方式。还记得以前详细介绍canvas基础api的情况下，有1个涵数，context.measureText(text) 这个涵数能够精确测量字体样式的宽高宽比，那就好办了，大家测算好大家标识符串的长度再加1个大约的宽度，基础上能够解决这类换行的难题了。
下面看实际完成方式：
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#E992B9";
ctx.lineWidth=1;
var str = "倘若日常生活蒙骗了你，请不必忧伤！thank you!"
var lineWidth = 0;
var canvasWidth = c.width;//测算canvas的宽度
var initHeight=15;//绘图字体样式间距canvas顶部原始的高宽比
var lastSubStrIndex= 0; //每次刚开始截取的标识符串的数据库索引
for(let i=0;i<str.length;i++){
lineWidth+=ctx.measureText(str[i]).width;
if(lineWidth>canvasWidth){
ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);//绘图截取一部分
initHeight+=20;//20为字体样式的高宽比
lineWidth=0;
lastSubStrIndex=i;
}
if(i==str.length⑴){//绘图剩下一部分
ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight);
}
}
奏效果图：
优化算法：测算标识符串str里边每一个标识符的宽度的和lineWidth，假如超过canvas的宽度，就截取这一部分开展绘图，随后重设lineWidth，储存刚开始截取的最终的数据库索引，当循环系统自变量i为最终1个标识符的情况下，立即绘图剩下一部分。
接下来：大家封裝成1个方式，便捷之后立即启用：
/*
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-initX){//减去initX,避免界限出現的难题
ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
initY+=lineHeight;
lineWidth=0;
lastSubStrIndex=i;
}
if(i==str.length⑴){
ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
}
}
}
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 商城网站建设_微商好助手_微商引流_电商网站模板_微信商家小程序 版权所有 （网站地图） 粤ICP备10235580号