html5 canvas绘图文本换行的示例代码
导读:本文介绍怎么解决canvas绘图过程中,drawText的换行问题,先看一个大家平时在canvas绘制文本都会遇到的问题: 一个150*100的canvas画布,加个边框明显边界 我们先来看fillText( 方法,strokeText...
本文介绍怎么解决canvas绘图过程中,drawText的换行问题,先看一个大家平时在canvas绘制文本都会遇到的问题:
一个150*100的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的时候,有一个函数,context.measureText(text)
这个函数可以测量字体的宽高度,那就好办了,我们计算好我们字符串的长度加上一个大概的宽度,基本上可以处理这种换行的问题了。
下面看具体实现方法:
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); }
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html5 canvas绘图文本换行的示例代码
本文地址: https://pptw.com/jishu/668939.html