<template>
  <view>
    <!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
    <canvas 
      canvas-id="canvas" 
      id="canvas"
      style="width: 200px; height: 200px;"  
    ></canvas>
  </view>
</template>

<script setup>
import { onMounted } from 'vue'

function draw() {
  const ctx = uni.createCanvasContext('canvas')  // 创建canvas绘图上下文

  // 绘制外圆
  ctx.beginPath()  // 开始路径
  ctx.arc(100, 100, 80, 0, Math.PI * 2)  // 在坐标(100, 100)处绘制半径为80的圆形
  ctx.setFillStyle('rgba(0, 0, 255, 0.3)')  // 设置填充颜色为蓝色，透明度为0.3
  ctx.fill()  // 填充所创建的路径
  
  // 绘制内圆以形成环形效果
  // ctx.beginPath()  // 开始新的路径
  // ctx.arc(100, 100, 60, 0, Math.PI * 2)  // 在相同中心点(100, 100)，但半径为60的圆形
  // ctx.setFillStyle('white')  // 设置填充颜色为白色
  // ctx.fill()  // 填充以“清除”内部区域，形成环形

  // // 如果需要绘制一个方块，例如在(50, 50)位置绘制一个40x40像素的正方形：
  // ctx.beginPath()  // 开始一个新的路径
  // ctx.rect(50, 50, 40, 40)  // 在画布上绘制一个左上角位于(50, 50)，宽高都是40像素的矩形
  // ctx.setFillStyle('green')  // 设置填充颜色为绿色
  // ctx.fill()  // 填充矩形
  
  ctx.draw()  // 将上述所有操作提交到canvas进行渲染
}

onMounted(() => {
  draw()  // 页面加载完成后调用draw函数开始绘图
})
</script>

<style scoped>
/* 样式部分 */
</style>