html5 canvas如何绘图文本换行
导读:本文共1216字符,通常情况下阅读需要4分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 怎么解决canvas绘图过程中,drawText的换行问题,先看一个大家平时在canvas绘制文本都会遇到的问题:一个150*100的canvas画布,加个边框明显边界<canvasid="canvas"style="border:solid1pxdarkgoldenrod;"width="200px&qu... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。怎么解决canvas绘图过程中,drawText的换行问题,先看一个大家平时在canvas绘制文本都会遇到的问题:
一个150*100的canvas画布,加个边框明显边界
我们先来看fillText()方法,strokeText()方法同理
可以看到fillText()在固宽的canvas中,字数过多的时候,并不会自动换行,我们可以增加canvas本身的宽度,但这不是解决问题的根本方法。还记得之前介绍canvas基本api的时候,有一个函数,context.measureText(text)
这个函数可以测量字体的宽高度,那就好办了,我们计算好我们字符串的长度加上一个大概的宽度,基本上可以处理这种换行的问题了。
下面看具体实现方法:
本文:
html5 canvas如何绘图文本换行的详细内容,希望对您有所帮助,信息来源于网络。