微信小程序中的canvas基礎應用

學了東西還是要記錄一下，剛入職的小萌新啊，運氣好分到一個項目不是很急的組原以為時間多了可以多學一些東西，但是發現好像不知道從哪里開始下手，我太南了。。。。

看旁邊的實習生同事一直在搞canvas，自己閑着也沒有事做，也來畫個簡單的canvas吧。

自己的項目是做的微信小程序用的mp-vue（后端遲遲不給我接口數據，界面寫好了就停滯不前了。。。），因此就直接嘗試微信的canvas，之前沒用過canvas，別批評我這個都不知道，其實就是有點懶，想着要用的時候再學，沒想到兜兜轉轉自己還是來學了hhhhh

首先，在template里面直接使用canvas就可以，因為微信小程序里面不支持dom的直接操作，所以想通過document來獲取canvas對象是不行滴，but微信小程序里面支持自己創建一個畫布對象，然后綁定一下自己的canvas-id就可以了。

var context = wx.createCanvasContext('firstCanvas')

於是乎，這個畫布對象就可以隨意蹂躪啦。

繪制這個過程其實不需要做過多的介紹，w3c里面都有介紹https://www.w3school.com.cn/tags/html_ref_canvas.asp ，微信公眾平台也有https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.html這里要說的就是怎么把本地圖片放進canvas里，這個創建的context對象有個drawImage方法，可以直接把圖片放進畫布里，當然大小位置都可以自己定義，drawImage（圖片路徑，x坐標，y坐標，寬，高）

想必大家都知道微信有很多分享都會生成畫報，其實這個就可以用畫布來做，因此我們就可以把畫布的內容生成圖片 wx.canvasToTempFilePath（{} ）

,大小什么的都是可以自定義的，另外要注意就是非箭頭函數要記得拿到正確的this對象，不然會拿錯的

wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 600,
        height: 800,
        destWidth: 600,
        destHeight: 800,
        canvasId: 'firstCanvas',
        success: function (res) {
          console.log('圖片臨時路徑', res.tempFilePath)
          that.newurl = res.tempFilePath 
          that.ifget = true
        },
        fail: function (err) {
          console.log(err)
        }
      })

然后再把生成的圖片保存到本地即可

wx.saveImageToPhotosAlbum({
        filePath: this.newurl,  // 保存的臨時路徑
        success (res) {
          console.log('444')
        }
      })

其實就是記錄一下怎么往畫布里放圖片然后保存到本地，一步一步來嘛，希望以后成為大佬的自己回過頭來看自己起步的博客，然后說一句那時候的自己真的是菜的沒辦法了hhh