前言
公司的小程序项目已经成功上线，这期间也踩过不少坑，影响最深刻的就是canvas，做过海报分享的童鞋应该都懂，微信小程序本身是不支持分享到朋友圈这种操作的，所以就需要我们自己来实现canvas绘制海报并保存到本地相册，那么接下来就总结一下canvas的使用和本人在写canvas时踩过的一些坑。
初识canvas
关于canvas的描述，官网写的很清楚，我就不在赘述了，直接上图。附上官网链接https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
使用canvas的准备工作
1.我们必须在wxml中定义一个canvas标签，并给他一个canvas-id
<canvas canvas-id='customCanvas'></canvas>
2.在js文件中拿到canvas的context
var ctx = wx.createCanvasContext('customCanvas')
准备工作完成之后，我们就可以开始做一系列操作，比如绘制文本，绘制图片等等
注意：以下步骤都是基于以上两步进行操作
绘制文本fillText
ctx.setFillStyle('#5F6FEE')//文字颜色：默认黑色
ctx.setFontSize(20)//设置字体大小，默认10
ctx.fillText("LXT", 20, 20)//绘制文本
//调用draw()开始绘制
ctx.draw()
效果展示
*****注意事项*****
如果有的童鞋，在调用fillText的时候，x和y都给0的话，文本是看不到的！
绘制图片drawImage
ctx.drawImage("../../res/suolong.jpeg",0,0,100,150)
ctx.draw()
效果展示
*****这里我们说一下imageResource，大家可以看到，我用的是本地图片，直接传入地址即可，但是如果大家想绘制网络图片的话，我们就要使用另外一种方式*****
首先我们要调用wx.getImageInfo拿到网络图片的信息，然后传入res.path进行绘制
wx.getImageInfo({
src: 'http://yuntu-img-new.oss-cn-shanghai-finance-1-pub.aliyuncs.com/applyCard/share/card_sahre_bg.png',
success(res){
ctx.drawImage(res.path,0,0,100,100)
ctx.draw()
}
})
绘制圆形图片
这个需求相信大家都不会陌生，一般用于绘制用户的头像，如果你们后台返回给你的图片就是圆形，那么恭喜你，直接drawImage即可，但是如果后台给的是非圆形，那么就需要你自己来做一个裁剪了。
ctx.save()//保存当前的绘图上下文。
ctx.beginPath()//开始创建一个路径
ctx.arc(50, 50, 50, 0, 2 * Math.PI,false)//画一个圆形裁剪区域
ctx.clip()//裁剪
ctx.drawImage("../../res/suolong.jpeg",0,0, 100, 100)//绘制图片
ctx.restore()//恢复之前保存的绘图上下文
ctx.draw()//绘制到canvas
arc方法说明
保存canvas到相册
经过一系列绘制操作，我们最终要把绘制的图片保存到用户相册。官方给的方法是先用canvasToTempFilePath生成一张图片，在调用saveImageToPhotosAlbum保存到相册，我们调用一下试试看
wx.canvasToTempFilePath({
canvasId: 'customCanvas',
success(res) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
wx.showToast({
title: '图片保存成功'
})
}
})
}
})
}
}, this)
*****注意，这里坑来了，如果我们调用上面的方法，确实可以保存到本地，没有任何问题，但是，我们看不到背景色
所以我们要在canvasToTempFilePath中加上一个参数， fileType: 'jpg'即可解决
canvas滑动问题
这个问题是我在做的时候发现的，因为我绘制的图片超出了一屏的高度而且需要给这个canvas添加一个长按事件，所以导致滑动卡顿甚至不可滑动，经过各种尝试，最终得出的结论是，不要把事件放在canvas上，可以在canvas外面套一层view，把事件放到view上面即可解决。
