canvas代码优化

src/pages/first-try.vue

@@ -13,8 +13,9 @@ import BowPower from "@/components/BowPower.vue";
 import TestDistance from "@/components/TestDistance.vue";
 import BubbleTip from "@/components/BubbleTip.vue";
 import audioManager from "@/audioManager";
-import { createPractiseAPI } from "@/apis";
-import { generateCanvasImage, wxShare, debounce } from "@/util";
+import { createPractiseAPI, getPractiseAPI } from "@/apis";
+import { sharePractiseData } from "@/canvas";
+import { wxShare, debounce } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -60,34 +61,29 @@ const createPractise = async (arrows) => {
   if (result) practiseId.value = result.id;
 };
 
+const onOver = async () => {
+  start.value = false;
+  practiseResult.value = await getPractiseAPI(practiseId.value);
+};
+
 async function onReceiveMessage(messages = []) {
   messages.forEach((msg) => {
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
-      if (scores.value.length < total) {
-        scores.value.push(msg.target);
-      }
       if (step.value === 2 && msg.target.dst / 100 >= 5) {
         btnDisabled.value = false;
         showGuide.value = true;
+      } else if (scores.value.length < total) {
+        scores.value.push(msg.target);
       }
-    }
-    if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
-      if (practiseId.value && practiseId.value === msg.practice.id) {
-        setTimeout(() => {
-          start.value = false;
-          practiseResult.value = {
-            ...msg.practice,
-            arrows: JSON.parse(msg.practice.arrows),
-            lvl: msg.lvl,
-          };
-        }, 1500);
+      if (scores.value.length === total) {
+        setTimeout(onOver, 1500);
       }
     }
   });
 }
 
 const onClickShare = debounce(async () => {
-  await generateCanvasImage("shareCanvas", 1, user.value, practiseResult.value);
+  await sharePractiseData("shareCanvas", 1, user.value, practiseResult.value);
   await wxShare("shareCanvas");
 });
 
@@ -262,7 +258,7 @@ const onClose = () => {
             : ''
         }finish-tip.png`"
       />
-      <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
+      <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">