本文共 3719 字，大约阅读时间需要 12 分钟。

������������������������������������������������

���������������������������������������������������������������������������������������������canvas API���������������������������������������������������������������������������������������������������������������������������������������

������������������������������

��������������������������������������������������� Taro.getSystemInfo() ������������������������������������������������������������������������������������������������������������������

Taro.getSystemInfo({
  success(res) {
    this.setState({
      screenWidth: res.screenWidth,
      screenHeight: res.screenHeight
    });
  }
});

������������������������������������������������������������������������

���������������������������������

���������������������������������������������������������������������Taro.createCanvasContext('poster', this.$scope) ������������������������canvas������������������������������������������������������������������������������������������������������������������������

���������������������������������������

drawList() {
  const { defaultWidth, defaultHeight, screenWidth } = this.state;
  let i = 100;
  let height = 0;
  const cvsCtx = Taro.createCanvasContext('poster', this.$scope);
  
  // ���������������������
  cvsCtx.fillStyle = 'white';
  cvsCtx.fillRect(0, 0, screenWidth, defaultHeight + height);
  
  // ������������������������
  cvsCtx.fillStyle = 'black';
  cvsCtx.font = '14px Arial';
  cvsCtx.fillText('���������', 20, 25 + height);
  cvsCtx.fillText(name, 60, 25 + height);
  
  // ������������
  cvsCtx.strokeStyle = '#eee';
  cvsCtx.strokeRect(0, 40 + height, screenWidth, 1);
  
  // ������������
  if (Math.random() < 0.1) {
    throw new Error('������������');
  }
  
  cvsCtx.draw();
}

���������������������������������������������������������������������

������������������������������������

��������������������������������������������������������������������������������������������������� Taro.canvasToTempFilePath() ���������������������������������������������������������������������������������

saveImage() {
  const { finalHeight, screenWidth } = this.state;
  
  Taro.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: screenWidth,
    height: finalHeight,
    destWidth: screenWidth * 2,  // 2���������������������
    destHeight: finalHeight * 2, // 2���������������������
    canvasId: 'poster',
    success(res) {
      this.setState({
        tempFilePath: res.tempFilePath
      });
    }
  });
}

������������������ocations������������������������������������

������������������������������

���������������������������������������������������������������������������������������������

saveImageToAlbum() {
  const { tempFilePath } = this.state;
  Taro.authorize({
    scope: 'scope.writePhotosAlbum'
  }).then(() => {
    Taro.saveImageToPhotosAlbum({
      filePath: tempFilePath,
      success() {
        Taro.showToast({
          title: '������������',
          icon: 'success',
          duration: 4000
        });
      }
    });
  });
}

������������������������������������������������������������������������������������������������

Canvas������������

���������������������canvas������������������������������������������������������������������������������������

2. ������ View ���������

������������������������������������ canvas ���������������������������������������������������������������������������

��������������������������������������������������������������������������������������������������������������������������������������������� Taro.js ��������������������������� API ������������������������������������������������������������������