移动端canvas不支持rem的解决方案

前一阵开发一套答题系统，最后需要把背景图，二维码以及文字等生成一张图，最后分享出去，没什么复杂的逻辑，就是在适配的时候出现了问题，canvas不支持rem这个单位（rem相信大家或多或少都用过），在chrome测试没发现问题，就是真机测试，字小的看不到。

其实解决方案也很简单，把rem还原回px：你的整体页面可能是这样的：1rem＝20px;以宽度375px作为基准（750的，720的也都一个道理，换算好就可以了），比如一行文字的大小是1.2rem:

var textPx = document.body.clientWidth * 20 / 375;

ctx.font = "bold " + 1.2 * textPx + "px" + " Arial";

换算之后拼接一下就可以了。

总结：从需求出来到上线就两天时间，之前也没怎么用过canvas，算是做个笔记吧。

此外，还有文字根据长短自动缩放、文字换行的问题（canvas处理文字的确有点麻烦）：

第一个问题：设置fillText最后一个参数，文字最大宽度，可以解决

第二个问题：可以封装一个方法，主要通过measureText来判断文字长度，来绘制文字位置，方法如下（可以根据实际需求更改）

  function canvasTextNext(str, ctx, initX, initY,lineHeight) {
  var lineWidth = 0;
  var canvasWidth = document.body.clientWidth;
  var lastSubStrIndex = 0;
  for (var i = 0; i < str.length; i++) {
    lineWidth += ctx.measureText(str[i]).width;
    if (lineWidth > canvasWidth - initX) {
      ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
      initY += lineHeight;
      lineWidth = 0;
      lastSubStrIndex = i;
    }
    if (i == str.length - 1) {
      ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
    }
  }
}

str:需要换行的字符串
ctx：创建的canvas画布
initX, initY：坐标
lineHeight：行高
复制代码

这些东西上网应该都可以查到，简单整理了一下，希望能帮助大家节省一些开发时间

转载于:https://juejin.im/post/5ad47340f265da2381561990