uniapp中用canvas写一个环形计时器

在 UniApp 中使用 Canvas 来创建一个环形计时器，你可以利用 Canvas 的绘图功能来绘制一个动态的、可旋转的圆形。以下是一个简单的步骤概述：

1. **引入依赖**：
首先，在 Vue 组件中安装并导入 `vue-canvas` 或者直接使用 HTML5 的 `<canvas>` 元素。

<template>
  <view>
    <canvas ref="timerCanvas" :style="{ width: '100%', height: '100%' }"></canvas>
  </view>
</template>

2. **声明并初始化 canvas**：
在 Vue 的 `data` 或者 `setup` 函数里定义变量用于存储 canvas 和相关参数。

<script setup>
import { ref, onMounted } from "vue";

const canvasRef = ref(null);
let ctx;
let radius = 50;
let rotation = 0;
let intervalId;

onMounted(() => {
  ctx = canvasRef.value.getContext('2d');
});
</script>

3. **绘制圆环**：
使用 `requestAnimationFrame` 或 `setInterval` 定时更新计时器。每次更新时，根据当前的时间计算角度，然后绘制环形。

export default {
  // ...
  methods: {
    drawTimer() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

      // 计算新的角度（这里假设一圈为360度）
      const angle = rotation % 360;

      // 根据角度绘制环形
      ctx.beginPath();
      ctx.arc(0, 0, radius, -90, angle + 90);
      ctx.stroke();

      // 更新旋转
      rotation += 1; // 这里只是一个示例，你可以替换为计时器或秒数递增

      // 设置动画循环
      if (intervalId) clearInterval(intervalId);
      intervalId = setInterval(() => this.drawTimer(), 1000 / 60); // 每秒更新一次
    },
  },
  // ...
};

4. **启动计时器**：
在 `mounted` 生命周期钩子或适当的地方调用 `drawTimer` 方法开始计时器。

现在你应该已经有一个基本的环形计时器了。如果你想让它更复杂，比如显示时间、添加动画效果等，可以在 `drawTimer` 方法中做相应的修改。记得确保处理可能的错误和清除定时器。