canvas 文字换行

引子

近期的工作中，遇到的功能需求，需要控制文字显示行数，超过就省略号显示。

• Origin
• My GitHub

文字换行

一般文字行数控制用 css 就可以实现，但在 canvas 中不行。在网站查询资料，就可以发现需要程序控制文字换行，主要使用到的方法是 measureText()，这个方法会返回一个度量文本的相关信息的对象，例如文本的宽度。

这里会有一个边界问题：如果文字在 canvas 边界出现换行，那么就可能出现文字显示不全的问题。

主要处理方法如下：

// 文本换行处理，并返回实际文字所占据的高度
function textEllipsis (context, text, x, y, maxWidth, lineHeight, row) {
   
  if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
   
    return;
  }
  var canvas = context.canvas;

  if (typeof maxWidth == 'undefined')