前端 小程序 canvas 绘制文本实现换行，设置字距

小程序 canvas 绘制文本实现换行，设置字距

在使用 canvas 绘制文本的过程中，对于很长的文本，canvas 不能自动的进行换行处理，另外小程序无法像 web 端那样很方便的使用 svg，所以在此做一个简单的记录。

浅析

在实现之前简单的分析一下，要实现文本换行功能，在 canvas 中我们使用的是 fillText(text, x, y, maxWidth) 方法， 假设我们绘制的文本有最大的宽度，在超出这个宽度之后就进行换行，所以我们得知道绘制文本的宽度。

设置字距，如果是 css 那么就简单，直接使用 letter-spacing 即可，当然可以给 canvas 直接设置， 但是对于部分场景下可能操作起来不是那么方便，所以还在在绘制上面下文章，既然不直接设置， 那么就只有绘制一个字符就隔开一定间距再绘制另外一个字符，也就是逐字绘制。

实现

效果

可以看到上面 canvas 绘制的效果和下面标签渲染的效果差不到很多。

最后

实现始终都是按照自己项目的需求来的，不同的项目，近似的一个需求可能实现的方式就稍微不同。

相关文章

 您阅读本篇文章共花了：