canvas.drawtext 换行,canvas filltext 换行

　　原型要求：

　　要求制作邀请卡页面，其中标题的字数是动态的，最多可以显示2行。如果超过2行，将在第二行末尾添加省略号。按照品女的性格，这种四行的设定到时候会有变化，所以这里一定不能写死。结果前几天真的要求最多显示四行，其余保持不变。产品女孩太小：)！

　　别瞎说，下面贴代码，出丑！看一下加载代码前需要传递的参数！

　　插画的插画参数，原谅我着急的PS技术和设计。

　　Ctx:画布内容的上下文：待绘制文本的内容drawx:绘制文本的X坐标Draw:绘制文本的Y坐标lineHeight:文本间的行高lineMaxWidth:文本每行的最大宽度lineNum:绘制的最大行数//自动换行功能textwrap (CTX，内容，drawX，drawy，Line height，linemaxwidth，lineNum){ var Draw txt= ；//当前绘制的内容var drawLine=1；//什么线开始画var draw index=0；//当前绘制内容的索引//确定内容是否可以绘制在一行if (ctx.measuretext (content)中。width=line maxwidth){ CTX . fill text(content . substring(drawindex，I)，drawx，drawy)；} else { for(var I=0；i=内容.长度；I){ draw txt=content[I]；If (ctx.measuretext (drawtxt)。width line maxwidth){ if(drawline==linenum){//添加省略号CTX . fill text(content . substring(drawindex，I) . ，drawx，drawy)在最后一行；打破；} else {//不是最后一行CTX . fill text(content . substring(drawindex，i 1)，drawx，drawy)的情况；draw index=I 1；//记录当前行最后一个字符串的下一个idnex，用来画下行的第一个字，drawLine=1；//行数1 draw=lineheight//绘图内容的Y坐标对应的是行高draw txt=“”；//重置绘制的内容}}}意外发现

　　在绘制文字的过程中，发现绘制文字的Y坐标是否以文字顶部为标准。一图胜千言，以上！

　　浏览器环境：chrome 71.0.3578.98(正式版)(64位)

　　字体大小是40px

　　绘制的y坐标为0时，可以看到文本再左上角只漏了一点点出来

　　当绘图的Y坐标为40时，可以看到文字可以完整显示。

　　后记

　　这是一个比较冷门的代码效果，但是也希望可以帮助到有需要的朋友，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。