微信小程序canvas实例

这里是一个微信小程序canvas的实例：

HTML：

<view class="canvas-container">
  <canvas id="myCanvas"></canvas>
</view>

CSS：

.canvas-container {
  width: 100%;
  height: 100%;
}

#myCanvas {
  width: 100%;
  height: 100%;
}

JS：

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

    // 绘制矩形
    ctx.rect(10, 10, 50, 50)
    ctx.setFillStyle('red')
    ctx.fill()

    // 绘制圆形
    ctx.beginPath()
    ctx.arc(50, 50, 30, 0, 2 * Math.PI)
    ctx.setFillStyle('blue')
    ctx.fill()

    // 绘制文字
    ctx.setFontSize(20)
    ctx.setFillStyle('black')
    ctx.fillText('Hello, world!', 100, 50)

    ctx.draw()
  }
})

这个示例演示了如何在canvas上绘制矩形、圆形和文字，然后将它们绘制在页面上。这只是一个简单的示例，canvas还有很多其他的功能和用法，可以根据需求进行学习和使用。