canvas之H5与uniapp的使用区别

前些时间在h5和uniapp小程序项目中需要封装签名组件，开发过程中发现在uniapp内使用的元素是被二次封装过的，所以直接使用时部分方法有所改变，因此做了以下简单的区别整理。

获取元素

h5

  <canvas id="sign-canvas"></canvas>

  this.canvas = document.getElementById('sign-canvas');

uniapp

  <canvas canvas-id="sign-canvas"></canvas>

  this.canvas = uni.createSelectorQuery().select('.sign-canvas');

注意：uni方法用在封装的组件内部时，需要使用.in()方法选取绑定范围，例：uni.createSelectorQuery().in(this).select('.sign-canvas')

获得渲染上下文和它的绘画功能

h5

  this.context = this.canvas.getContext('2d');

uniapp

  this.context = uni.createCanvasContext('sign-canvas', this);

设置画布大小

h5

  this.canvas.width = 300;
  this.canvas.height = 300;

uniapp

  <canvas canvas-id="sign-canvas" style="{ width: 300px, height: 300px }"></canvas>

生成base64图片

h5

  this.canvas.toDataURL('image/png')

指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式

uniapp

  let that = this;
  uni.getSystemInfo({
    success: function (res) {
      // createSelectorQuery 组件加.in(this)
      let canvas = uni.createSelectorQuery().in(that).select('.sign-canvas');
      canvas.boundingClientRect().exec(function (data) {
        let canvasW = Math.ceil(data[0].width);
        let canvasH = Math.ceil(data[0].height);
        // canvasToTempFilePath 组件加this指向
        uni.canvasToTempFilePath(
          {
            destWidth: canvasW,
            destHeight: canvasH,
            fileType: 'png',
            canvasId: 'sign-canvas',
            success: function (res) {
              // console.log('图片导出成功', res);
              let path = res.tempFilePath;
            },
            fail: err => {
              console.log('图片导出失败：', err);
            },
          },
          that
        );
      });
    },
  });

详请参见：sign-panel签名组件 组件效果