關於h5繪制canvas生成圖片的注意點！

1、第一個是關於移動端自適應的問題：

答：如果是最后只要一張canvas生成的圖片，而不是要繪制的canvas的圖形，則不需要考慮自適應，繪制canvas的時候的寬高，可以直接寫成UI提供的圖的大小，比如UI提供的圖是 750 * 1280 ,則繪制canvas的時候，所有的數據都可以

以375*640來進行計算，固定好即可！這個跟后台繪制圖片的原理一樣，我們不需要考慮自適應，ui給什么圖，或者說我們希望要多大的圖片，我們直接繪制即可，因為圖片最后自己可以按比例伸縮，默認即是自適應！ 

2、關於H5繪制canvas的多行文本，我們可以利用測量寬度進行自動換行繪制文字！

3、繪制圖片完成后再繪制文字，即可解決文字在圖片底部的問題！

 

具體代碼如下：

/**
 * 繪制canvas
 */
function draw(name='大威德', score = 23, level = 1, str = '哈哈哈哈') {
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    // 繪制背景
    var img = new Image();
    img.src = "images/newbg.jpg";
    img.onload = function () {
        ctx.drawImage(img, 0, 0,375,640);
        // 繪制底部文字
        ctx.font = "bold normal 20px Microsoft YaHei";
        ctx.fillStyle = "black";
        ctx.fillText(name, 375 * 0.18, 640 * 0.34);
        ctx.font = "bold normal 20px Microsoft YaHei";
        ctx.fillStyle = "red";
        ctx.fillText(score, 375 * 0.63, 640 * 0.345);
        ctx.fillStyle = "black";
        ctx.fillText(level, 375 * 0.37, 640 * 0.458);
        ctx.font = "normal 18px Microsoft YaHei";
        ctx.fillStyle = "black";
        // 繪制多行文字
        canvasTextAutoLine(str, c, 375 * 0.1, 640 * 0.5, 20);

　　　　　 var imgsrc = c.toDataURL("image/png",1);

　　　注意：這一行就是把canvas繪制的圖形變成圖片，imgsrc為base64格式！

    };

}
/*
str:要繪制的字符串
canvas:canvas對象
initX:繪制字符串起始x坐標
initY:繪制字符串起始y坐標
lineHeight:字行高，自己定義個值即可
*/
function canvasTextAutoLine(str, canvas, initX, initY, lineHeight) {
    var ctx = canvas.getContext("2d");
    var lineWidth = 0;
    var canvasWidth = document.documentElement.clientWidth;
    var lastSubStrIndex = 0;
    for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width;
        if (lineWidth > canvasWidth * 0.8) {//減去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);
        }
    }
}