关于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);
        }
    }
}

原文地址：https://www.cnblogs.com/teamemory/p/9767030.html