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

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