uniapp中使用vue3通过canvas绘制蓝色网格

以下是使用Vue3和Canvas在Uniapp中绘制蓝色网格的示例代码：

<template>
  <canvas ref="canvas" @ready="onReady" />
</template>

<script>
import { onMounted, ref } from 'vue'

export default {
  setup() {
    const canvasRef = ref(null)

    const onReady = () => {
      const canvas = canvasRef.value
      const ctx = canvas.getContext('2d')

      // 设置网格线颜色为蓝色
      ctx.strokeStyle = '#00f'

      // 绘制横向网格线
      for (let i = 0; i <= canvas.height; i += 10) {
        ctx.beginPath()
        ctx.moveTo(0, i)
        ctx.lineTo(canvas.width, i)
        ctx.stroke()
      }

      // 绘制纵向网格线
      for (let i = 0; i <= canvas.width; i += 10) {
        ctx.beginPath()
        ctx.moveTo(i, 0)
        ctx.lineTo(i, canvas.height)
        ctx.stroke()
      }
    }

    onMounted(() => {
      const canvas = canvasRef.value
      canvas.width = 300
      canvas.height = 300
    })

    return {
      canvasRef,
      onReady,
    }
  },
}
</script>