微信小程序实现Canvas画板

这个小demo适用于 快递实名签收等业务逻辑

源码如下：

js文件：

Page({
   
  data: {
   
    ctx: "", // 保存 canvas 上下文
    pen: 5, // 画笔默认的宽度
    color: "#000", // 画笔默认的颜色
  },
  startX: 0, // 保存 X 坐标
  startY: 0, // 保存 Y 坐标
  onLoad() {
   
    // 获取到 canvas 的上下文，并且保存在 ctx 里面
    const query = wx.createSelectorQuery();
    query.select("#myCanvas")
      .fields({
   
        node: true,
        size: true
      })
      .exec(res => {
   
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');

        // 注意，这里还有一个非常关键的步骤
        // 在新版的 canvas 接口中需要显式的设置画布的宽高
        // 一定要手动指定画布的宽高
        // 否则画布会被拉伸
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr);

        this.setData({
   
          ctx
        });
      })
  },
  touchstart(e) {
   
    // 拿到手指按下时的坐标
    this.startX = e.changedTouches[0].x;
    this.startY = e.changedTouches[0].y;

    // 进行一些绘制的准备工作（笔粗细、颜色、笔头）
    // 如果使用过微信小程序旧版接口的同学，需要注意
    // 现在很多方法都没有，已经停止维护
    this.data.ctx.lineWidth