onLoad:function(option){
    var _this =this
      this.ctx = tt.createCanvasContext('canvas');    
    if(option.id!=undefined){
      App.request.get(App.api.mall, {
            'm': 'getCouponById',
            'id': option.id
          }, function (res) {
            _this.setData({
              coupon: res
            });


            tt.downloadFile({
                url: res.qrcode,
                success: function (res2) {
                  _this.setData({
                    code: res2.tempFilePath
                  });
                  
 
// console.log('res2',res2)
                  // console.log('code',_this.data.code)
                  _this.draw();

                }
              })
           
          });
    }
  },
　　

drawBackground() { var that =this let ctx = this.ctx; // let r = this.r; // let rpx = this.rpx;
let res = wx.getSystemInfoSync() let rpx = res.windowWidth / 375
that.setData({ rpx: res.windowWidth / 375 }) //我是大背景 ctx.setFillStyle('#6a1f74'); //為建立的canvans上下文添充顏色 如果沒有設定 fillStyle，預設顏色為 black。 ctx.fillRect(0, 0,375* rpx, 668 * rpx) //我是白色背景 ctx.setFillStyle('white'); //為建立的canvans上下文添充顏色 如果沒有設定 fillStyle，預設顏色為 black。 ctx.fillRect(27* rpx, 58 * rpx,320* rpx, 495 * rpx)
ctx.save(); ctx.beginPath(); //開始繪製 // 先畫個圓 // ctx.arc(190 * rpx, 60 * rpx, 30 * rpx, 0 * rpx, Math.PI * 2, false); //false代表順時針 圖片的位置加半徑 // ctx.setStrokeStyle('white') ctx.clip();//畫了圓 再剪下 原始畫布中剪下任意形狀和尺寸。一旦剪下了某個區域，則所有之後的繪圖都會被限制在被剪下的區域內 ctx.drawImage('/image/logo22.png', 158 * rpx, 30 * rpx, 60 * rpx, 60 * rpx); // 推進去圖片 ctx.restore(); //恢復之前儲存的繪圖上下文 恢復之前儲存的繪圖上下文即狀態 可以繼續繪製
ctx.drawImage('/image/top.png', 27 * rpx, 50 * rpx, 320 * rpx, 10 * rpx); ctx.drawImage('/image/logo2.png', 160 * rpx, 31 * rpx, 60 * rpx, 47 * rpx);
ctx.drawImage('/image/tit.png', 110 * rpx, 100 * rpx, 150 * rpx, 60 * rpx);

ctx.setFillStyle("#602671"); ctx.setFontSize(30 * rpx); //字大小 ctx.setTextAlign('left'); //是否居中顯示，參考點畫布中線 ctx.fillText(this.data.coupon.order_price, 143 * rpx, 157 * rpx);
ctx.setFillStyle("#602671"); ctx.setFontSize(30 * rpx); //字大小 ctx.setTextAlign('left'); //是否居中顯示，參考點畫布中線 ctx.fillText(this.data.coupon.price, 230 * rpx, 157 * rpx);
ctx.drawImage('/image/border.png', 73 * rpx, 175 * rpx, 230 * rpx, 230 * rpx);
ctx.drawImage(this.data.code, 78 * rpx, 180 * rpx, 220 * rpx, 220 * rpx);
ctx.drawImage('/image/line.png', 15 * rpx, 420 * rpx, 344 * rpx, 24 * rpx);
ctx.drawImage('/image/text.png', 50 * rpx, 460 * rpx, 280 * rpx, 70 * rpx);
ctx.drawImage('/image/bottom.png', 27 * rpx, 550 * rpx, 320 * rpx, 10 * rpx); ctx.draw();

},

draw() { var that =this let ctx = this.ctx; ctx.clearRect(0, 0, 300, 300); //每一次都要將canvas清空一下，不然秒針就會一直顯示在canvas上面 this.drawBackground(); ctx.draw(); var t= setTimeout(function(){ that.saveImg() clearTimeout(t) },2000) }, saveImg() { let that = this; var rpx = 1 tt.canvasToTempFilePath({ x: 0, y: 0, width: 375 * rpx, //畫布寬高 height: 668 * rpx, destWidth: 1125 * rpx, //畫布寬高*dpr 以iphone6為準 destHeight: 2004 * rpx, //放大2倍以上，解決儲存的圖片模糊的問題 canvasId: 'canvas', success: function (res) { console.log('res',res) //生成的臨時圖片路徑 tt.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function (res) { // console.log(res); tt.showToast({ title: '儲存成功', }) tt.switchTab({ url: "/pages/index/index", success(res11) { console.log(res11); }, fail(res) { console.log(`redirectTo呼叫失敗`); }, }); }, fail: function () { console.log('a') } }) } })
// console.log(3333) }

ttml:

<view class="container">
  <view class="body canvas-space">
    <canvas canvas-id="canvas" style="width:750rpx !important;height:1336rpx !important" class="canvas"></canvas>
  </view>
</view>

ttjs: