前言

在使用canvas繪制海報的過程中不建議使用原生來進行畫圖，因為默認是不支持rpx像素的，px不會做到自適應。

推薦使用插件 Painter

github地址

github.com/Kujiale-Mob （本地下載）…

配置很簡單，也容易上手，無論是畫矩形，還是將圖片合成canvas；還是自己定義文字；都是很方便的。

附上一個簡單的例子吧

 <painter :customStyle="customStyle" :palette="imgDraw" />

// const _this=this;   wx.getSystemInfo({    success (res) {     _this.drawCanvas(res.windowHeight);    }   })	 drawCanvas(height) {//這里的canvas的高是動態獲取設備的高度，做到自適應    const that = this;   let heightVal=height*2+'rpx';   this.imgDraw = {    width: '750rpx',    height: heightVal,    background: '#fff',    views: [     {      type: "rect",      css: {       top: '20rpx',       left: '130rpx',       color: '#1A1A1A',       width: '660rpx',       height: '220rpx',       borderRadius: '32rpx'      }     },     {      type: 'image',      url: './a.jpg',      css: {       top: '36rpx',       left: '16rpx',       width: '188rpx',       height: '188rpx'      }     },     {      type: 'text',      text: '',      css: {       top: '54rpx',       left: '260rpx',       fontSize: '48rpx',       color: "#fff"      }     },     {      type: 'text',      text: '文字部分',      css: {       top: '134rpx',       left: '260rpx',       fontSize: '30rpx',       color: "#d1d1d1"      }     },     {      type: 'text',      text: '1333333333',      css: {       top: '196rpx',       left: '260rpx',       fontSize: '26rpx',       color: "#d1d1d1"      }     },     {      type: 'text',      text: '李四',      css: {       top: '304rpx',       left: '302rpx',       fontSize: '24rpx',       color: "#767676"      }     },     {      type: 'image',      url: '/icon-localtion.png',      css: {       top: '275rpx',       left: '260rpx',       width: '26rpx',       height: '168rpx'      }     },     {      type: 'image',      url: '二維碼.png',      css: {       top: '646rpx',       left: '236rpx',       width: '278rpx',       height: '278rpx'      }     }    ]   }     let { path: __path } = mpvue.getStorageSync('createImagePath')   mpvue.saveImageToPhotosAlbum({    filePath: __path,    success(res) {     // mpvue.showToast({     //  title: '保存成功',     //  icon: 'success',     //  duration: 800,     //  mask: true     // });       },    fail(res) {     // mpvue.showToast({     //  title: '保存失敗',     //  icon: 'fail',     //  duration: 800,     //  mask: true     // });    }   });  },