先说一下做功能前的感受，简直一脸懵逼，第一次用canvas，只知道是个画布，其余什么都不知道…琢磨了一天才画出来…
开始之前百度了很久，想看看别人怎么写的，但是目前网上基本上用的都是wx.createCanvasContext这个api，但是这个api已经停止维护了，要求使用canvas代替，
https://developers./miniprogram/dev/api/canvas/wx.createCanvasContext.html
上面是官方文档的出处，只好开始硬怼canvas文档，言归正传，下面是我的代码。
第一步是先创建canvas标签；
<canvas wx:if="{{isshow}}" type="2d" id="Canvas" canvas-id="Canvas" style="width: {{ windowW }}px; height: {{ windowH }}px;"></canvas>
第二步是获取手机系统信息，拿到手机屏幕的宽高以及设备像素比
getSystemInfo() {let that = thiswx.getSystemInfo({success: function (res) {console.log(res);that.setData({windowW: res.windowWidth,windowH: res.windowHeight,pixelRatio: res.pixelRatio})},})},
第三步是拿到canvas对象实例返回用于在画布上的环境，这里拿canvas节点实例用到wx.createSelectorQuery()这个api，拿到画布后就可以开始插入图片，绘制矩形等操作，这里要注意小程序要先缩放画布，如果不缩放，会导致画布过大不适应手机屏幕，canvas的像素单位是px，所以不能自适应屏幕，需要做换算，我换算的原理是设计稿的宽度是750，所以我按照设计稿的宽度进行换算，后来听我师傅说用rem也可以，但是懒得换了，就没换了哈哈哈。
createcanvas: function () {this.setData({isshow: true})let that = this,windowW = that.data.windowW,windowH = that.data.windowH;const query = wx.createSelectorQuery() //获取对象实例query.select('#Canvas') //选择获取canvas对象实例.fields({ //获取节点的相关信息。需要获取的字段在fields中指定。node: true,size: true}).exec((res) => {console.log(res);const canvas = res[0].node //拿到canvas对象that.setData({ //这里保存canvas对象是因为下面保存相片要用这个对象canvas})const ctx = canvas.getContext('2d') //返回用于在画布上绘图的环境const dpr = that.data.pixelRatio //拿到设备像素比canvas.width = res[0].width * dpr //缩放画布canvas.height = res[0].height * dprctx.scale(dpr, dpr)//1、绘制背景图(本地图片)const imgbg = canvas.createImage()imgbg.onload = (e) => {console.log(1);ctx.drawImage(imgbg, 0.133 * windowW, (windowW - 100) * 0.2, (windowW - 100), (windowW - 100) * 1.38) //50//绘制上半部内容背景区域that.roundRect(ctx, 0.16 * windowW, (windowW - 100) * 0.25, (windowW - 122), (windowW - 100) * 0.89, 8, '#fff') // 59//绘制下半部内容背景区域that.roundRect(ctx, 0.16 * windowW, (windowW - 100) * 1.19, (windowW - 122), (windowW - 100) * 0.33, 8, '#fff') //59//2、绘制商品图片及文字const imggood = canvas.createImage()imggood.onload = (e) => {console.log(2);ctx.drawImage(imggood, 0.205 * windowW, (windowW - 100) * 0.28, (windowW - 154), (windowW - 100) * 0.61)//设置文字let str = '50元购100元代金券，任何商品可使用。具体解释权归商场所有。'let chr = str.split(""); //这个方法是将一个字符串分割成字符串数组let temp = "";let row = [];ctx.font = "12px";ctx.fillStyle = "#313648";// console.log(ctx.measureText(str)); //查看文本长度//如果文字过长设置为两行for (let a = 0; a < chr.length; a++) {if (ctx.measureText(temp).width < (windowW - 184)) {temp += chr[a];} else {a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比row.push(temp);temp = "";}}row.push(temp);if (row.length > 2) {let rowCut = row.slice(0, 2);let rowPart = rowCut[1];let test = "";let empty = [];for (let a = 0; a < rowPart.length; a++) {if (ctx.measureText(test).width < (windowW - 184)) {test += rowPart[a];} else {break;}}empty.push(test);let group = empty[0] + "..." //这里只显示两行，超出的用...表示rowCut.splice(1, 1, group);row = rowCut;}for (let b = 0; b < row.length; b++) {// console.log(row[b]);ctx.fillText(row[b], 0.23 * windowW, (windowW - 100) * 1 + b * 20); //85}//3、绘制底部数据const imgava = canvas.createImage()imgava.onload = (e) => {console.log(3);//绘制头像ctx.drawImage(imgava, 0.24 * windowW, (windowW - 100) * 1.24, windowW * 0.06, windowW * 0.06) // 90//绘制微信名ctx.font = "12px";ctx.fillStyle = "#313648";ctx.fillText('梅梅', 0.333 * windowW, (windowW - 100) * 1.29); //125}imgava.src = '../../images/phone.png'//4、绘制抢购价图片const imgqgj = canvas.createImage()imgqgj.onload = (e) => {console.log(4);//绘制头像ctx.drawImage(imgqgj, 0.24 * windowW, (windowW - 100) * 1.35, 0.101 * windowW, 0.04 * windowW) //90//绘制价格ctx.font = "14px sans-serif";ctx.fillStyle = "#e62e0a";ctx.fillText('￥98.00', 0.368 * windowW, (windowW - 100) * 1.395); //138//绘制喜欢的人ctx.font = "12px sans-serif";ctx.fillStyle = "#e62e0a";ctx.fillText('11846人喜欢', 0.24 * windowW, (windowW - 100) * 1.47); //90//绘制小程序二维码图片const imgqrcode = canvas.createImage()imgqrcode.onload = (e) => {console.log(5);//绘制二维码ctx.drawImage(imgqrcode, 0.64 * windowW, (windowW - 100) * 1.225, 0.144 * windowW, 0.144 * windowW)//绘制长按购买that.roundRect(ctx, 0.624 * windowW, (windowW - 100) * 1.44, 0.182 * windowW, 0.043 * windowW, 16, '#d94413')//绘制文字ctx.font = "10px sans-serif";ctx.fillStyle = "#fff";ctx.fillText('长按立即购买', 0.64 * windowW, (windowW - 100) * 1.48);}imgqrcode.src = '../../images/2ava.jpg'}imgqgj.src = '../../images/qgj.png'}imggood.src = '../../images/good.png'}imgbg.src = '../../images/1bg.png'})},/*** 绘制圆角矩形* @param {Object} ctx - canvas组件的绘图上下文* @param {Number} x - 矩形的x坐标* @param {Number} y - 矩形的y坐标* @param {Number} w - 矩形的宽度* @param {Number} h - 矩形的高度* @param {Number} r - 矩形的圆角半径* @param {String} [c = 'transparent'] - 矩形的填充色*/roundRect(ctx, x, y, w, h, r, c = '#fff') {if (w < 2 * r) {r = w / 2;}if (h < 2 * r) {r = h / 2;}ctx.beginPath();ctx.fillStyle = c;ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);ctx.moveTo(x + r, y);ctx.lineTo(x + w - r, y);ctx.lineTo(x + w, y + r);ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);ctx.lineTo(x + w, y + h - r);ctx.lineTo(x + w - r, y + h);ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);ctx.lineTo(x + r, y + h);ctx.lineTo(x, y + h - r);ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);ctx.lineTo(x, y + r);ctx.lineTo(x + r, y);ctx.fill();ctx.closePath();},
代码很长，上面的两处代码我是百度两位博主粘贴得来的，比如文字过长分为两段显示的代码、绘制圆角矩形的代码，但是真不记得是哪位博主了…当时并没有做记录，所以如果你看到了，请谅解…
另外我这里的图片都是线下的图片，不是线上请求的，因为这个时候后端接口还没写好，后期线上图片有了再更新
第四步是保存图片到手机
这里主要用到三个api，第一个是wx.canvasToTempFilePath（把当前画布指定区域的内容导出生成指定大小的图片），第二个wx.getSetting（这里是查看是否有相册权限），第三个是wx.saveImageToPhotosAlbum（保存到相册），这里canvas生成图片对于2d画布使用的是canvas属性，而不是canvasId属性，要求传一个对象 这里就是我们在获取canvas实例的时候保存的canvas，下面是代码。
//点击保存海报savepic() {let that = thiswx.showLoading({title: '正在保存',mask: true})console.log(that.data.windowW - 0.133 * that.data.windowW, that.data.windowY - (that.data.windowW - 100) * 0.2);wx.canvasToTempFilePath({canvas: that.data.canvas,x: 0.133 * that.data.windowW,y: (that.data.windowW - 100) * 0.2,width: that.data.windowW - 100,height: (that.data.windowW - 100) * 1.38,success: function (res) {console.log(res);wx.hideLoading()let tempFilePath = res.tempFilePaththat.checkWritePhotosAlbum(tempFilePath)},fail: function (err) {console.log(err)wx.showToast({title: '保存失败!请重新保存',icon: 'none'})wx.hideLoading()}})},//查看是否有相册权限checkWritePhotosAlbum: function (filePath) {let that = thiswx.getSetting({success(res) {if (!res.authSetting['scope.writePhotosAlbum']) {wx.authorize({scope: 'scope.writePhotosAlbum',success() {that.saveToPhoto(filePath)},fail() {wx.openSetting({success(res) {if (res.authSetting['scope.writePhotosAlbum']) {that.saveToPhoto(filePath)}},fail(res) {wx.showToast({title: '您没有授权，无法保存到相册!',icon: 'none'})}})}})} else {that.saveToPhoto(filePath)}}})},//保存到相册saveToPhoto: function (filePath) {let that = this;wx.saveImageToPhotosAlbum({filePath: filePath,success(res) {wx.showModal({content: '图片已保存到相册，前往相册即可查看！',showCancel: false,confirmText: '好的',confirmColor: '#333',success: function (res) {console.log(res)that.close()},fail: function (res) {console.log(res)}})},fail: function (res) {wx.showToast({title: res.errMsg,icon: 'none',duration: 2000})}})},
