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

以下是一个简单的例子，展示如何在微信小程序中使用 `<canvas>` 组件进行绘图，并实现画圆、直线、矩形、三角形、文字、填充、保存图片到相册等功能。

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

Page({
  onReady: 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.createCanvasContext()` 创建了一个画布上下文对象，然后使用各种绘图 API 绘制了圆、直线、矩形、三角形、文字和填充等图形。最后，我们调用了 `ctx.draw()` 将图形绘制到画布上，并且使用 `wx.canvasToTempFilePath()` 将画布保存为临时文件，再使用 `wx.saveImageToPhotosAlbum()` 将临时文件保存到相册中。

需要注意的是，保存图片到相册需要用户授权，如果用户没有授权，则会保存失败。所以，在调用 `wx.saveImageToPhotosAlbum()` 之前，最好先调用 `wx.getSetting()` 检查用户是否已经授权。