微信小程序之畫布(canvas)轉化出來的圖片模糊問題

將canvas大小設為(1200*800)，使用css將canvas縮放到適應屏幕大小。

這在開發工具的模擬器中是沒有問題的，然而在真機測試的時候是無效的，不管用的是transform還是zoom。

本質上就是生成一個更大的圖片，因為手機的屏幕設備的像素比現在一般都是超過2的。實際上我們只需要在使用wx.canvasToTempFilePath的時候，設置參數destWidth和destHeight(輸出的寬度和高度)為width和height的2倍以上即可。

context.draw(true, setTimeout(function() {
      //將生成好的圖片保存到本地，需要延遲一會，繪制期間耗時
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 670,
        height: 959,
        destWidth: 2010,
        destHeight: 2877,
        canvasId: 'mycanvas',
        success: function(res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          });
        },
        fail: function(res) {
          console.log(res);
        }
      });
    }, 200));