前言

公司的小程序项目已经成功上线，这期间也踩过不少坑，影响最深刻的就是canvas，做过海报分享的童鞋应该都懂，微信小程序本身是不支持分享到朋友圈这种操作的，所以就需要我们自己来实现canvas绘制海报并保存到本地相册，那么接下来就总结一下canvas的使用和本人在写canvas时踩过的一些坑。

初识canvas

关于canvas的描述，官网写的很清楚，我就不在赘述了，直接上图。附上官网链接https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

canvas

使用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上面即可解决。