移動端canvas不支援rem的解決方案

瘦居居發表於2018-04-16
CanvasREM

前一陣開發一套答題系統，最後需要把背景圖，二維碼以及文字等生成一張圖，最後分享出去，沒什麼複雜的邏輯，就是在適配的時候出現了問題，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：行高
複製程式碼

這些東西上網應該都可以查到，簡單整理了一下，希望能幫助大家節省一些開發時間

相關文章