这篇博客介绍了如何在微信小程序中使用canvas绘制多行文本，包括支持英文单词截断和不同行高、最大宽度的调整。文章提供了一个名为`drawTxt`的方法，该方法接受多个参数，如绘制上下文、文本内容、单词是否截断等，并通过调整字体样式、测量文本宽度来实现文本的多行绘制。示例代码展示了如何调用此方法并保存和绘制canvas。
效果图：
方法封装：
/**
*【drawTxt】canvas 绘制多行文本
*【TODO: 中英混排且考虑单词截断...】
*
* @param {*} context 绘制上下文环境 【必传】
* @param {*} text 文本内容
* @param {*} broken 单词是否截断显示 【true 如果不考虑英文单词的完整性 适用于所有情况】 【false 考虑英文单词的完整性 仅适用于纯英文】
* @param {*} fillStyle 文本颜色
* @param {*} fontSize 文本大小
* @param {*} x 文本左上角x坐标
* @param {*} y 文本左上角y坐标
* @param {*} lineHeight 行高
* @param {*} maxWidth 最大宽度
* @returns 此次绘制文本的高度 单位: px
*/
drawTxt:function({context,...rest}) {
if (!context) throw Error('请传入绘制上下文环境context')
// 获取计算后的值
let
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
