微信小程序中的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