标签：ast init cli 一个 style 后台 测量 black text
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);
}; } /* 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); } } }
标签：ast init cli 一个 style 后台 测量 black text
原文地址：https://www.cnblogs.com/teamemory/p/9767030.html
