Canvas文本绘制实现自动换行以及调节文字换行间距

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

最近在使用canvas开发一个H5页面。其中有部分文字因为超出背景所定义的宽度需要进行换行。如果你使用过canvas,那么你一定用过文本绘制,遗憾的是canvas文档中,文本绘制并没有自动换行的方法。本文将带您打造一个可以自动换行的canvas轮子

canvas 文本绘制

文本绘制一共有两个方法

//在指定的位置填充实心文本
fillText(text, x, y, [maxWidth])
//在指定的位置填充空心文本
strokeText(text,x,y,[maxWidth])

text:需要绘制的文本内容 x:向x轴方向的偏移量(x轴坐标) y:向y轴方向的偏移量(y轴坐标) maxWidth:允许绘制的最大宽度 单位px

当设置 maxWidth小于所需要绘制文本的宽度时,超出的部分将会进行隐藏。

改造绘制方法

canvas api中 有这样一个方法

//检测一段文本 返回一个对象，该对象包含以像素计的指定字体宽度。
context.measureText(text)`

code实现
//在canvas的原型上添加一个方法
CanvasRenderingContext2D.prototype.wrapText = function (canvas,text,x,y,maxWidth,lineHeight){
  // 对入参的类型进行检测
  if(typeof text !='string' || typeof x !='number' || typeof y !='number'){
    return;
  }
  //如果最大宽度未定义 默认为300px
  if(typeof maxWidth =='undefined'){
    maxWidth = (canvas && canvas.width) || 300;
  }
  //如果行高未定义 则定义为检测画布文本的行高或html页面的默认行高
  //window.getComptedStyle(Eelement) 传入节点返回节点对象
  if(typeof lineHeight == 'undefined'){
    lineHeight = (canvas.canvas && parseInt(window.getComputedStyle(canvas.canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight)
  }
  var arrText = text.split('');
  var line = '';
  for (var n = 0; n < arrText.length; n++) {
   //每个循环累加字符
    var testLine = line + arrText[n];
    //检测累加字符 获取累加字符的高度和宽度
    var metrics = canvas.measureText(testLine);
    var testWidth = metrics.width;
    //如果累加字符的宽度大于定义的绘制文本最大宽度 则绘制累加字符的文本 并且设置换行间距再次进行绘制
    if (testWidth > maxWidth && n > 0) {
      canvas.fillText(line, x, y);
      line = arrText[n];
      y += lineHeight;
    } else {
      line = testLine;
    }
  }
  canvas.fillText(line, x, y);
}

canvas:画布实例 lineHeight:换行高度

使用方法

如上图所示 即可实现文字换行啦。

最后

感谢您观看此篇博客，如果对您有帮助，希望能给个👍评论收藏三连！