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

		<!-- 添加一个按钮，用于触发绘图 -->
		<button @click="handleDraw()">点击绘制圆形</button>
	</view>
</template>

<script setup>
	import {
		ref
	} 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, 0, 1)') // 设置填充颜色为黑色，无透明度
		ctx.fill() // 填充所创建的路径
		
		// 绘制内圆以形成环形效果
		ctx.beginPath() // 开始新的路径
		ctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
		ctx.setFillStyle('white') // 设置填充颜色为白色
		ctx.fill() // 填充以“清除”内部区域，形成环形
		ctx.draw() // 将上述所有操作提交到canvas进行渲染
	}

	// 按钮点击事件处理函数
	const handleDraw = () => {
		draw(); // 调用绘图函数
	}
</script>

<style scoped>
	/* 样式部分 */
	button {
		margin-top: 10px;
		/* 给按钮设置一些上边距以避免过于紧凑 */
	}
</style>