xiangyuan-app/src/pages/home/village/components/VillageTree.vue

<template>
  <canvas 
    id="villageTree"
    :width="systemInfo.windowWidth" 
    :height="200" 
  />
</template>

<script setup>
import { defineComponent, getCurrentInstance, onMounted } from 'vue';

const instance = getCurrentInstance();
const systemInfo = uni.getSystemInfoSync();

let canvas = null;
let ctx = null

async function initCanvas() {
  uni.createSelectorQuery()
    .in(instance)
    .select('#villageTree')
    .fields({ node: true, size: true }, (res) => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
     
      // 保存到 this，方便其他函数使用
      canvas = canvas
      ctx = ctx
    })
}
function animate() {
}



function animate() {
  flag.rotation += 0.01
  requestAnimationFrame(() => animate(stage, flag))
}

onMounted(() => {
  initCanvas()
});
</script>