html5 canvas的绘制文本自动换行的示例代码html内容超出了div的宽度如何换行让内容自动换行html、css 禁止文字自动换行属性word-breakhtml中div不自动换行、强制不换行的具体实现html pre标签使文本自动换行 html pre标记里内容自动换行如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

 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); 

 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;icanvasWidth){ ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);//绘制截取部分 initHeight+=20;//20为字体的高度 lineWidth=0; lastSubStrIndex=i; } if(i==str.length-1){//绘制剩余部分 ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight); } } 

 /* 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;icanvasWidth-initX){//减去initX,防止边界出现的问题 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); } } }