canvas 文字自动换行功能的实现

微信小程序canvas文本自动换行，同样适用于普通的H5页面的canvas，注意调用方法前要设置字体，例如： ctx.font = '12px Arial'

/**
 * canvas文本自动换行，注意调用前要设置字体，例如： ctx.font = '12px Arial'
 * @param {*} ctx CanvasRenderingContext2D
 * @param {*} text  文本
 * @param {*} x 
 * @param {*} y 
 * @param {*} lw 行宽
 * @param {*} lh 行高
 * return 绘制文本所需的高度
 */
const fillTextLineBreak = (ctx,text,x,y,lw,lh)=> {
  let i = 0
  let n = 0
  let r = -1
  while (i < text.length){
    while (ctx.measureText(text.substring(n, i)).width < lw && i < text.length) {
      i++
    }
    r++
    ctx.fillText(text.substring(n, i), x, y + lh * r)
    n = i
  }
  return lh * r
}

使用

	context.font = 'bold 16px Arial'
	const ty = fillTextLineBreak(context, title, 10, 10, 18,18)

转载自 blog.csdn.net/dehobo/arti…