在canvas上绘制文字内容原型要求：要求制作邀请卡页面，标题字数动态，最多显示2行。如果超过2行，将在第二行末尾添加一个省略号。以产品妹的性格，四行设定到时候很可能会改，所以一定不能写死。结果前几天真的要求改成最多显示4行，其他不变。产品女孩太年轻了:)！废话不多说，下面贴出代码，秀丑！上传代码前先看看需要传递的参数！！图解参数说明，见谅PS技术和设计仓促ctx:canvascontextcontent:需要绘制的文字内容drawX:绘制文字的x坐标drawY:绘制文字的y坐标lineHeight:lineMaxWidthoflineheightbetweentexts:最大宽度每行文字lineNum：最大画线数//文字自动换行函数textPrewrap(ctx,content,drawX,drawY,lineHeight,lineMaxWidth,lineNum){vardrawTxt='';//当前绘制的内容vardrawLine=1;//从哪一行开始绘制vardrawIndex=0;//当前绘制内容的索引//判断内容是否可以一行绘制if(ctx.measureText(content).width<=lineMaxWidth){ctx.fillText(content.substring(drawIndex,i),drawX,绘制Y);}else{for(vari=0;i=lineMaxWidth){if(drawLine>=lineNum){ctx.fillText(content.substring(drawIndex,i)+'..',drawX,drawY);}休息;}else{ctx.fillText(content.substring(drawIndex,i+1),drawX,drawY);drawIndex=i+1;画线+=1；drawY+=lineHeight;drawTxt='';}}else{//内容绘制完成，但剩余内容的宽度不是TolineMaxWidthif(i===content.length-1){ctx.fillText(content.substring(drawIndex),drawX,drawY);}}}}}无意中发现，在绘制文字的过程中，绘制文字的y坐标是根据上面的文字吗？图片胜于文字，上图！浏览器环境：chrome71.0.3578.98（正式版）（64位）当字体大小为40px，绘图y坐标为0时，可以看到左上角只少了一点点文本。当绘图的y坐标为40时，可以看到文字可以完整显示后记。这是一个比较冷门的代码效果，但希望可以帮助到有需要的朋友。如果对您有帮助，请点下一个赞，表达您的鼓励！谢谢:)如果您看到这个，首先，感谢您抽出宝贵的时间来看这个。如有错误，希望大家指出错误。谢谢：）关掉手机闹钟，去睡觉吧！明天起床看雷霆战马！OhRoar2019编码和篮球！
