微信小程序进行绘图。包含画圆、直线、矩形、三角形、文字、填充、保存图片到相册

以下是一个完整的微信小程序绘图示例，包含画圆、直线、矩形、三角形、文字、填充、保存图片到相册等功能。

<view class="container">
  <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>
  <button class="btn" bindtap="saveImage">保存图片到相册</button>
</view>

Page({
  data: {
    canvasWidth: 0,
    canvasHeight: 0
  },

  onReady: function () {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas').boundingClientRect((rect) => {
      this.setData({
        canvasWidth: rect.width,
        canvasHeight: rect.height
      })
      this.draw()
    }).exec()
  },

  draw: function () {
    const ctx = wx.createCanvasContext('myCanvas')

    // 画圆
    ctx.beginPath()
    ctx.arc(50, 50, 20, 0, 2 * Math.PI)
    ctx.stroke()

    // 画直线
    ctx.beginPath()
    ctx.moveTo(80, 50)
    ctx.lineTo(120, 50)
    ctx.stroke()

    // 画矩形
    ctx.strokeRect(150, 30, 50, 30)

    // 画三角形
    ctx.beginPath()
    ctx.moveTo(220, 50)
    ctx.lineTo(260, 10)
    ctx.lineTo(260, 90)
    ctx.closePath()
    ctx.stroke()

    // 写字
    ctx.font = '24px Arial'
    ctx.fillText('Hello, World!', 20, 100)

    // 填充颜色
    ctx.fillStyle = 'red'
    ctx.fillRect(150, 70, 50, 30)

    ctx.draw()
  },

  saveImage: function () {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function () {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          },
          fail: function () {
            wx.showToast({
              title: '保存失败',
              icon: 'none',
              duration: 2000
            })
          }
        })
      }
    })
  }
})

在这个例子中，我们使用了 `wx.createSelectorQuery()` 获取画布的宽度和高度，并将它们保存在页面的 `data` 中。在 `onReady` 生命周期中，我们调用了 `this.draw()` 方法，该方法使用 `wx.createCanvasContext()` 创建了一个画布上下文对象，然后使用各种绘图 API 绘制了圆、直线、矩形、三角形、文字和填充等图形。最后，我们调用了 `ctx.draw()` 将图形绘制到画布上，并且使用 `wx.canvasToTempFilePath()` 将画布保存为临时文件，再使用 `wx.saveImageToPhotosAlbum()` 将临时文件保存到相册中。

需要注意的是，保存图片到相册需要用户授权，如果用户没有授权，则会保存失败。所以，在调用 `wx.saveImageToPhotosAlbum()` 之前，最好先调用 `wx.getSetting()` 检查用户是否已经授权。此外，为了避免因为画布尺寸变化而导致绘图出错，建议在每次绘图前都重新获取画布尺寸。