html5 canvas的绘图文字全自动换行的示例编码

日期:2021-02-23 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

本文详细介绍如何处理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);
        }
    }
  }

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。