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