支付宝小程序canvas绘制有问题

[15167103105]

问题描述
[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]

复现步骤

[或者可以直接贴源代码，能贴文字就不要截图]
刮刮卡小游戏，设置蒙层没问题，但是调用clear刮开有问题，会直接将蒙层消失了，刮开的图层也不会保留，只有一个圆
用原生这样写是没问题的，但是换这里就有问题了

import Taro, { Component } from '@tarojs/taro';
import { View, Image, Canvas } from '@tarojs/components';
import './scratch-card.less';
import bg from '../../images/scratchCard/background-guagua.png';

export default class ScratchCard extends Component{

  componentDidMount () {
    this.scratchCard = Taro.createCanvasContext('scratchCard', this.$scope);
    this.draw();
  }

  onTouchMove = (e) => {
    this.clear(e);
  }

  onTouchEnd = () => {
  }

  draw = () => {
    this.drawBackground();
  }

  drawBackground = () => {
    let { scratchCard } = this;
    scratchCard.save(); //保存当前环境状态
    scratchCard.beginPath(); //新建一条路径
    scratchCard.fillStyle = '#7f7f7f';
    scratchCard.rect(0, 0,220,120);
    scratchCard.fill(); //填充绘制图像
    scratchCard.restore(); //返回之前保存过的路径状态和属性
    scratchCard.draw();
  }

  clear = (e) => {
    let { scratchCard } = this;
    console.log('clear', scratchCard,e);
    // scratchCard.save(); //保存当前环境状态
    scratchCard.beginPath();
    scratchCard.arc(e.touches[0].x , e.touches[0].y, 10, 0, Math.PI*2);
    scratchCard.fill();
    // scratchCard.restore();
    scratchCard.draw();
  }

  render() {
    return (
      <View className='demo'>
        {/*<Image src={bg} />*/}
        <Canvas
          style='width:56%;height:18%;'
          canvasId='scratchCard'
          className='canvas'
          onTouchMove={this.onTouchMove}
          onTouchEnd={this.onTouchEnd}
          onTouchStart={this.onTouchMove}
        />
      </View>
    )
  }
}

// 这里可以贴代码

// js // 代码放这里（前后的 "" 有助 Mardown 整理代码格式和加入代码高亮）
// ```

// 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间。
// 代码提供不全或代码格式混乱的 issues 【有可能被忽略】，烦请各位注意。

**期望行为**
[这里请用简洁清晰的语言描述你期望的行为]

**报错信息**

[这里请贴上你的**完整**报错截图或文字]

**系统信息**
> Taro v1.2 及以上版本已添加 `taro info` 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

 - 操作系统: [e.g. Windows 10]
 - Taro 版本 [e.g. v.0.0.64]
 - Node.js 版本 [e.g. v9.0.0]
 - 报错平台 [h5, weapp]

**补充信息**
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[luckyadam]

应该是支付宝自己的问题，你可以试试原生来写

[shenghanqin]

刮刮卡小游戏，是小游戏还是小程序？
我也是感觉可能是支付宝原生侧有问题。
你可以试用Taro最新版试试看。