微信小程序canvas画图时需要按button2次才能显示

可能是因为第一次点击按钮时，只是触发了绘图的动作，但并没有将绘制的结果显示出来。第二次点击按钮时，才会将之前绘制的结果进行渲染并显示在页面上。

要解决这个问题，可以在绘制完成后，手动调用 canvas.toTempFilePath() 方法将绘制结果转换为临时文件路径，并将该路径设置为 <image> 组件的 src 属性，从而实现即时显示。具体代码如下：

// 在 button 的点击事件中绘制图形
onButtonTap() {
  const context = wx.createCanvasContext('myCanvas');

  // 绘制图形
  // ...

  // 绘制完成后，将绘制结果转换为临时文件路径
  context.draw(false, () => {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: (res) => {
        // 将临时文件路径设置为 <image> 组件的 src 属性
        this.setData({
          imagePath: res.tempFilePath
        });
      }
    });
  });
}

然后，在页面中添加一个 <image> 组件，并将 imagePath 绑定到 src 属性上：

<image src="{{imagePath}}" mode="aspectFit"></image>

这样，在点击按钮后，绘制结果就能即时显示在页面上了