diff --git a/src/canvas.js b/src/canvas.js
new file mode 100644
index 0000000..e677b99
--- /dev/null
+++ b/src/canvas.js
@@ -0,0 +1,481 @@
+import { loadImage } from "@/util";
+
+function drawLine(ctx, x1, y1, x2, y2, color = "#000", width = 1) {
+  ctx.beginPath();
+  ctx.lineWidth = width;
+  ctx.strokeStyle = color;
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.stroke();
+}
+
+const drawRoundImage = async (
+  ctx,
+  img,
+  x,
+  y,
+  width,
+  height,
+  radius,
+  borderColor = null,
+  borderWidth = 0
+) => {
+  ctx.save();
+  // 创建圆角路径
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+
+  // 右上角
+  ctx.lineTo(x + width - radius, y);
+  ctx.arcTo(x + width, y, x + width, y + radius, radius);
+
+  // 右下角
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+
+  // 左下角
+  ctx.lineTo(x + radius, y + height);
+  ctx.arcTo(x, y + height, x, y + height - radius, radius);
+
+  // 左上角
+  ctx.lineTo(x, y + radius);
+  ctx.arcTo(x, y, x + radius, y, radius);
+
+  ctx.clip();
+  // 绘制图片
+  ctx.drawImage(img, x, y, width, height);
+  ctx.restore();
+
+  // 绘制边框（可选）
+  if (borderWidth > 0 && borderColor) {
+    // 内收路径，使描边完全落在给定宽高内
+    const inset = borderWidth / 2;
+    const bx = x + inset;
+    const by = y + inset;
+    const bw = width - inset * 2;
+    const bh = height - inset * 2;
+    const br = Math.max(radius - inset, 0);
+
+    ctx.beginPath();
+    ctx.moveTo(bx + br, by);
+    // 右上角
+    ctx.lineTo(bx + bw - br, by);
+    ctx.arcTo(bx + bw, by, bx + bw, by + br, br);
+    // 右下角
+    ctx.lineTo(bx + bw, by + bh - br);
+    ctx.arcTo(bx + bw, by + bh, bx + bw - br, by + bh, br);
+    // 左下角
+    ctx.lineTo(bx + br, by + bh);
+    ctx.arcTo(bx, by + bh, bx, by + bh - br, br);
+    // 左上角
+    ctx.lineTo(bx, by + br);
+    ctx.arcTo(bx, by, bx + br, by, br);
+
+    if (typeof ctx.setLineWidth === "function") {
+      ctx.setLineWidth(borderWidth);
+    } else {
+      ctx.lineWidth = borderWidth;
+    }
+    if (typeof ctx.setStrokeStyle === "function") {
+      ctx.setStrokeStyle(borderColor);
+    } else {
+      ctx.strokeStyle = borderColor;
+    }
+    ctx.stroke();
+  }
+};
+
+function drawRingCircle(ctx, x, y, text, diameter = 12) {
+  const fillColor = "#ff4444";
+  const borderColor = "#ffffff";
+  const borderWidth = 1;
+  const r = diameter / 2;
+
+  const cx = x - r - borderWidth;
+  const cy = y - r - borderWidth;
+
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.fillStyle = fillColor;
+
+  ctx.shadowColor = "rgba(0,0,0,0.25)";
+  ctx.shadowBlur = 2;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 1;
+  ctx.fill();
+
+  // 重置阴影
+  ctx.shadowColor = "transparent";
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 0;
+
+  ctx.lineWidth = borderWidth;
+  ctx.strokeStyle = borderColor;
+  ctx.stroke();
+
+  const fontSize = 9;
+  ctx.save();
+  ctx.translate(cx, cy);
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.font = `${fontSize}px sans-serif`;
+  ctx.fillStyle = "#ffffff";
+  ctx.scale(0.7, 1);
+  ctx.fillText(String(text ?? ""), 0, 0);
+  ctx.restore();
+}
+
+function drawRoundedRect(
+  ctx,
+  x,
+  y,
+  width,
+  height,
+  radius,
+  fillColor = "#fff",
+  strokeColor = null,
+  lineWidth = 1
+) {
+  const r = Math.max(Math.min(radius, Math.min(width, height) / 2), 0);
+  if (r === 0) {
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    if (fillColor) {
+      ctx.fillStyle = fillColor;
+      ctx.fill();
+    }
+    if (strokeColor) {
+      ctx.lineWidth = lineWidth;
+      ctx.strokeStyle = strokeColor;
+      ctx.stroke();
+    }
+    return;
+  }
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + width - r, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+  ctx.lineTo(x + width, y + height - r);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+  ctx.lineTo(x + r, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
+
+  if (fillColor) {
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+  }
+
+  if (strokeColor) {
+    ctx.lineWidth = lineWidth;
+    ctx.strokeStyle = strokeColor;
+    ctx.stroke();
+  }
+}
+
+function drawTextBoxesLine(
+  ctx,
+  text,
+  startX,
+  baselineY,
+  fontSize = 9,
+  padding = 10,
+  bgColor = "#fff",
+  textColor = "#000",
+  radius = 4,
+  gap = 0
+) {
+  const str = String(text || "");
+  ctx.font = `${fontSize}px sans-serif`;
+  const w = ctx.measureText(str).width; // 整段文本宽度
+  const hPadding = padding + 4;
+  const rectW = Math.ceil(w) + hPadding * 2;
+  const rectH = fontSize + padding * 2;
+  const rectY = baselineY - fontSize - padding / 1.3;
+  drawRoundedRect(ctx, startX, rectY, rectW, rectH, radius, bgColor, null, 0);
+  renderText(
+    ctx,
+    str,
+    fontSize,
+    textColor,
+    startX + rectW / 2,
+    baselineY,
+    "center"
+  );
+  return startX + rectW + gap;
+}
+
+function renderText(
+  ctx,
+  text,
+  size,
+  color,
+  x,
+  y,
+  textAlign = "left",
+  rotateDeg = 0
+) {
+  ctx.font = `${size}px sans-serif`;
+  ctx.fillStyle = color;
+  ctx.textAlign = textAlign;
+  ctx.textBaseline = "alphabetic";
+  if (rotateDeg) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate((Math.PI / 180) * rotateDeg);
+    ctx.fillText(text, 0, 0);
+    ctx.restore();
+  } else {
+    ctx.fillText(text, x, y);
+  }
+}
+
+export const generateShareImage = async (canvasId, data) => {
+  try {
+    const pointBook = uni.getStorageSync("point-book");
+    const arrowData = data.groups && data.groups[0] ? data.groups[0] : {};
+    const hasPoint =
+      Array.isArray(arrowData.list) &&
+      arrowData.list.some((arrow) => arrow?.x && arrow?.y);
+
+    const width = 375;
+    const height = hasPoint ? 800 : 440;
+    // 获取 Canvas 2D 上下文并按 DPR 设置
+    const { canvas, ctx } = await getCanvas2DContext(canvasId, width, height);
+
+    // 背景填充
+    ctx.fillStyle = "#F5F5F5";
+    ctx.fillRect(0, 0, width, height);
+
+    // 背景图
+    const bgSrc = await loadImage(
+      "https://static.shelingxingqiu.com/attachment/2025-11-14/de88ugdgqwecnmsqfv.png"
+    );
+    const bgImg = await loadCanvasImage(canvas, bgSrc);
+    ctx.drawImage(bgImg, 0, 0, width, 300);
+
+    // 头像
+    const avatarSrc = await loadImage(data.user.avatar);
+    const avatarImg = await loadCanvasImage(canvas, avatarSrc);
+    await drawRoundImage(ctx, avatarImg, 13, 13, 54, 54, 27, "#000", 1);
+
+    renderText(ctx, data.user.name, 18, "#000", 84, 36);
+    renderText(ctx, data.recordDate, 9, "#fff", 350, 24, "center", 39);
+    renderText(ctx, "今日打卡", 13, "#fff", 336, 38, "center", 39);
+
+    // 文本标签
+    let cursorX = 84;
+    cursorX = drawTextBoxesLine(
+      ctx,
+      pointBook.bowType.name,
+      cursorX,
+      58,
+      9,
+      5,
+      "#fff",
+      "#000",
+      6,
+      2
+    );
+    cursorX = drawTextBoxesLine(
+      ctx,
+      String(pointBook.distance) + " 米",
+      cursorX + 6,
+      58,
+      9,
+      5,
+      "#fff",
+      "#000",
+      6,
+      2
+    );
+    cursorX = drawTextBoxesLine(
+      ctx,
+      pointBook.bowtargetType.name,
+      cursorX + 6,
+      58,
+      9,
+      5,
+      "#fff",
+      "#000",
+      6,
+      2
+    );
+
+    renderText(ctx, "落点稳定性", 13, "#999", 25, 110);
+    renderText(ctx, "黄心率", 13, "#999", 145, 110);
+    renderText(ctx, "10环数", 13, "#999", 262, 110);
+
+    renderText(
+      ctx,
+      Number(arrowData.stability.toFixed(2)),
+      15,
+      "#000",
+      25,
+      133
+    );
+    renderText(
+      ctx,
+      Number((arrowData.yellowRate * 100).toFixed(2)) + "%",
+      15,
+      "#000",
+      145,
+      133
+    );
+    renderText(ctx, arrowData.tenRings, 15, "#000", 262, 133);
+
+    renderText(ctx, "平均环数", 13, "#999", 25, 175);
+    renderText(ctx, "总换数", 13, "#999", 145, 175);
+    renderText(
+      ctx,
+      Number(arrowData.averageRing.toFixed(2)),
+      15,
+      "#000",
+      25,
+      200
+    );
+    renderText(
+      ctx,
+      `${arrowData.userTotalRing}/${arrowData.totalRing}`,
+      15,
+      "#000",
+      145,
+      200
+    );
+
+    if (hasPoint) {
+      drawRoundedRect(ctx, 20, 230, 5, 15, 5, "#FED847");
+      renderText(ctx, "落点分布", 13, "#999", 32, 242);
+
+      const bowSrc = await loadImage(pointBook.bowtargetType.iconPng);
+      const bowImg = await loadCanvasImage(canvas, bowSrc);
+      ctx.drawImage(bowImg, 375 * 0.08, 250, 375 * 0.84, 375 * 0.84);
+      arrowData.list
+        .filter((arrow) => arrow?.x && arrow?.y)
+        .forEach((arrow, index) => {
+          const px = 375 * 0.08 + 375 * 0.84 * arrow.x;
+          const py = 250 + 375 * 0.84 * arrow.y;
+          drawRingCircle(ctx, px, py, index + 1);
+        });
+    }
+
+    const ringNames = ["X", 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, "M"];
+    const ringBarHeight = hasPoint ? 700 : 340;
+
+    let rings = new Array(12).fill(0);
+    arrowData.list.forEach((arrow) => {
+      if (arrow.ring === 0) rings[0]++;
+      else if (arrow.ring === -1) rings[11]++;
+      else rings[arrow.ring]++;
+    });
+    [rings[0], rings[11]] = [rings[11], rings[0]];
+    rings = rings.reverse().map((count) => ({
+      count,
+      rate: count / arrowData.list.length,
+    }));
+
+    const barColor = (rate) => {
+      if (rate >= 0.4) return "#FDC540";
+      if (rate >= 0.2) return "#FED847";
+      return "#ffe88f";
+    };
+    const barWidth = 20;
+    const barSpacing = 7.1;
+    const startX = 38;
+    const startY = ringBarHeight - 15;
+
+    rings.forEach((ring, index) => {
+      const barHeight = ring.rate * 90;
+      if (ring.rate > 0) {
+        renderText(
+          ctx,
+          Number((ring.rate * 100).toFixed(1)) + "%",
+          9,
+          "#333",
+          startX + index * (barWidth + barSpacing),
+          startY - barHeight - (hasPoint ? 6 : 3)
+        );
+      }
+      ctx.fillStyle = barColor(ring.rate);
+      ctx.fillRect(
+        startX + index * (barWidth + barSpacing),
+        startY - barHeight,
+        barWidth,
+        barHeight
+      );
+    });
+
+    renderText(ctx, "环值", 9, "#999", 15, ringBarHeight - 1);
+    ringNames.forEach((ring, index) => {
+      renderText(
+        ctx,
+        ring,
+        11,
+        "#333",
+        48 + index * 27,
+        ringBarHeight,
+        "center"
+      );
+    });
+    drawLine(ctx, 15, ringBarHeight - 15, 362, ringBarHeight - 15, "#333");
+
+    const qrcodeSrc = await loadImage(
+      "https://static.shelingxingqiu.com/attachment/2025-11-13/de7fzgghsfgqu0ytu6.png"
+    );
+    const qrcodeImg = await loadCanvasImage(canvas, qrcodeSrc);
+    ctx.drawImage(qrcodeImg, 40, hasPoint ? 715 : 358, 68, 68);
+
+    renderText(ctx, "射灵星球", 18, "#333", 120, hasPoint ? 734 : 380);
+    renderText(
+      ctx,
+      "高效记录每一箭，快来一起打卡吧！",
+      13,
+      "#999",
+      120,
+      hasPoint ? 756 : 402
+    );
+    renderText(ctx, "扫码打卡", 13, "#FFA118", 120, hasPoint ? 777 : 422);
+    // 2D 即时绘制，无需 ctx.draw()
+  } catch (e) {
+    console.error("generateShareImage 绘制失败:", e);
+  }
+};
+
+// 顶部导入与工具方法
+async function getCanvas2DContext(canvasId, targetWidth, targetHeight) {
+  return new Promise((resolve) => {
+    const query = uni.createSelectorQuery();
+    query
+      .select(`#${canvasId}`)
+      .fields({ node: true, size: true })
+      .exec((res) => {
+        const { node: canvas } = res[0] || {};
+        const ctx = canvas.getContext("2d");
+        const dpr = uni.getSystemInfoSync().pixelRatio || 1;
+
+        const w = targetWidth || res[0].width;
+        const h = targetHeight || res[0].height;
+
+        canvas.width = w * dpr;
+        canvas.height = h * dpr;
+        ctx.scale(dpr, dpr);
+        resolve({ canvas, ctx, dpr, cssWidth: w, cssHeight: h });
+      });
+  });
+}
+
+async function loadCanvasImage(canvas, src) {
+  return new Promise((resolve, reject) => {
+    try {
+      const img = canvas.createImage();
+      img.onload = () => resolve(img);
+      img.onerror = (e) => reject(e);
+      img.src = src;
+    } catch (e) {
+      reject(e);
+    }
+  });
+}
diff --git a/src/pages/point-book-detail.vue b/src/pages/point-book-detail.vue
index 38eac85..6af54a8 100644
--- a/src/pages/point-book-detail.vue
+++ b/src/pages/point-book-detail.vue
@@ -7,7 +7,8 @@ import ScreenHint2 from "@/components/ScreenHint2.vue";
 import RingBarChart from "@/components/RingBarChart.vue";
 
 import { getPointBookDetailAPI, addNoteAPI } from "@/apis";
-import { wxShare, generateShareCard, generateShareImage } from "@/util";
+import { wxShare, generateShareCard } from "@/util";
+import { generateShareImage } from "@/canvas";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -23,6 +24,7 @@ const targetId = ref(0);
 const targetSrc = ref("");
 const arrows = ref([]);
 const notes = ref("");
+const hasPoint = ref(false);
 const record = ref({
   groups: [],
   user: {},
@@ -94,6 +96,11 @@ onLoad(async (options) => {
   if (options.id) {
     const result = await getPointBookDetailAPI(options.id || 243);
     record.value = result;
+    const arrowData =
+      record.value.groups && record.value.groups[0]
+        ? record.value.groups[0]
+        : {};
+    hasPoint.value = (arrowData.list || []).some((arrow) => arrow.x && arrow.y);
     notes.value = result.remark || "";
     const config = uni.getStorageSync("point-book-config");
     config.targetOption.some((item) => {
@@ -170,8 +177,9 @@ onShareTimeline(async () => {
       ></canvas>
       <canvas
         class="share-canvas"
-        canvas-id="shareImageCanvas"
-        style="width: 375px; height: 860px"
+        id="shareImageCanvas"
+        type="2d"
+        :style="`width: 375px; height: ${hasPoint ? 800 : 440}px`"
       ></canvas>
       <view class="detail-data">
         <view>
@@ -216,7 +224,7 @@ onShareTimeline(async () => {
           <text>{{ notes ? "我的备注" : "添加备注" }}</text>
         </button>
       </view>
-      <view class="title-bar">
+      <view class="title-bar" v-if="hasPoint">
         <view />
         <text>落点分布</text>
         <!-- <button hover-class="none" @click="() => openTip(2)">
@@ -227,7 +235,10 @@ onShareTimeline(async () => {
           />
         </button> -->
       </view>
-      <view :style="{ transform: 'translateY(-64rpx) scale(0.9)' }">
+      <view
+        :style="{ transform: 'translateY(-64rpx) scale(0.9)' }"
+        v-if="hasPoint"
+      >
         <BowTargetEdit
           :id="targetId"
           :src="targetSrc"
@@ -235,7 +246,7 @@ onShareTimeline(async () => {
           :scroll="false"
         />
       </view>
-      <view :style="{ transform: 'translateY(-100rpx)' }">
+      <view :style="{ transform: hasPoint ? 'translateY(-100rpx)' : 'none' }">
         <!-- <view class="title-bar">
           <view />
           <text>环值分布</text>
diff --git a/src/pages/point-book.vue b/src/pages/point-book.vue
index a3b0884..c86f07e 100644
--- a/src/pages/point-book.vue
+++ b/src/pages/point-book.vue
@@ -312,7 +312,6 @@ onShareTimeline(() => {
         </view>
         <canvas
           id="heatMapCanvas"
-          canvas-id="heatMapCanvas"
           type="2d"
           style="
             width: 100%;
diff --git a/src/util.js b/src/util.js
index 1e06711..b528e06 100644
--- a/src/util.js
+++ b/src/util.js
@@ -105,222 +105,6 @@ export function renderText(
   }
 }
 
-// 绘制圆角矩形（可选填充和描边）
-export function drawRoundedRect(
-  ctx,
-  x,
-  y,
-  width,
-  height,
-  radius,
-  fillColor = "#fff",
-  strokeColor = null,
-  lineWidth = 1
-) {
-  const r = Math.max(Math.min(radius, Math.min(width, height) / 2), 0);
-  // 当圆角为 0 时，避免使用 arcTo 导致平台差异，直接绘制普通矩形
-  if (r === 0) {
-    ctx.beginPath();
-    if (typeof ctx.rect === "function") {
-      ctx.rect(x, y, width, height);
-    } else {
-      ctx.moveTo(x, y);
-      ctx.lineTo(x + width, y);
-      ctx.lineTo(x + width, y + height);
-      ctx.lineTo(x, y + height);
-      ctx.lineTo(x, y);
-    }
-    if (fillColor) {
-      if (typeof ctx.setFillStyle === "function") {
-        ctx.setFillStyle(fillColor);
-      } else {
-        ctx.fillStyle = fillColor;
-      }
-      ctx.fill();
-    }
-    if (strokeColor) {
-      if (typeof ctx.setLineWidth === "function") {
-        ctx.setLineWidth(lineWidth);
-      } else {
-        ctx.lineWidth = lineWidth;
-      }
-      if (typeof ctx.setStrokeStyle === "function") {
-        ctx.setStrokeStyle(strokeColor);
-      } else {
-        ctx.strokeStyle = strokeColor;
-      }
-      ctx.stroke();
-    }
-    return;
-  }
-  ctx.beginPath();
-  ctx.moveTo(x + r, y);
-  // 顶边到右上角
-  ctx.lineTo(x + width - r, y);
-  ctx.quadraticCurveTo(x + width, y, x + width, y + r);
-  // 右边到右下角
-  ctx.lineTo(x + width, y + height - r);
-  ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
-  // 底边到左下角
-  ctx.lineTo(x + r, y + height);
-  ctx.quadraticCurveTo(x, y + height, x, y + height - r);
-  // 左边到左上角
-  ctx.lineTo(x, y + r);
-  ctx.quadraticCurveTo(x, y, x + r, y);
-  // 显式闭合路径，避免某些 Android WebView/Canvas 在左上角出现缺口
-  ctx.closePath();
-
-  if (fillColor) {
-    if (typeof ctx.setFillStyle === "function") {
-      ctx.setFillStyle(fillColor);
-    } else {
-      ctx.fillStyle = fillColor;
-    }
-    ctx.fill();
-  }
-
-  if (strokeColor) {
-    if (typeof ctx.setLineWidth === "function") {
-      ctx.setLineWidth(lineWidth);
-    } else {
-      ctx.lineWidth = lineWidth;
-    }
-    if (typeof ctx.setStrokeStyle === "function") {
-      ctx.setStrokeStyle(strokeColor);
-    } else {
-      ctx.strokeStyle = strokeColor;
-    }
-    ctx.stroke();
-  }
-}
-
-export function drawRingCircle(ctx, x, y, text, diameter = 12) {
-  const fillColor = "#ff4444";
-  const borderColor = "#ffffff";
-  const borderWidth = 1;
-  const r = diameter / 2;
-
-  // 传入的 x/y 需要减去半径和边框长度
-  const cx = x - r - borderWidth;
-  const cy = y - r - borderWidth;
-
-  // 画圆填充
-  ctx.beginPath();
-  if (typeof ctx.arc === "function") {
-    ctx.arc(cx, cy, r, 0, Math.PI * 2);
-  } else {
-    // 简易兼容：没有 arc 方法时，用圆角矩形近似
-    drawRoundedRect(ctx, cx - r, cy - r, r * 2, r * 2, r, fillColor, null, 0);
-  }
-  if (typeof ctx.setFillStyle === "function") {
-    ctx.setFillStyle(fillColor);
-  } else {
-    ctx.fillStyle = fillColor;
-  }
-
-  // 添加微弱阴影提升立体感
-  if (typeof ctx.setShadow === "function") {
-    ctx.setShadow(0, 1, 2, "rgba(0,0,0,0.25)");
-  } else {
-    ctx.shadowColor = "rgba(0,0,0,0.25)";
-    ctx.shadowBlur = 2;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 1;
-  }
-
-  ctx.fill();
-
-  // 重置阴影，避免影响后续描边和文字
-  if (typeof ctx.setShadow === "function") {
-    ctx.setShadow(0, 0, 0, "rgba(0,0,0,0)");
-  } else {
-    ctx.shadowColor = "transparent";
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-  }
-
-  // 画白色 1px 边框
-  if (typeof ctx.setLineWidth === "function") {
-    ctx.setLineWidth(borderWidth);
-  } else {
-    ctx.lineWidth = borderWidth;
-  }
-  if (typeof ctx.setStrokeStyle === "function") {
-    ctx.setStrokeStyle(borderColor);
-  } else {
-    ctx.strokeStyle = borderColor;
-  }
-  // 当 arc 不可用时，drawRoundedRect 已经完成边框；否则对圆描边
-  if (typeof ctx.arc === "function") {
-    ctx.stroke();
-  }
-
-  // 在圆心绘制数字，使用水平缩放实现窄体，并保持圆心居中
-  const fontSize = 9;
-  if (typeof ctx.setFontSize === "function") {
-    ctx.setFontSize(fontSize);
-  } else {
-    ctx.font = `${fontSize}px sans-serif`;
-  }
-  if (typeof ctx.setFillStyle === "function") {
-    ctx.setFillStyle("#ffffff");
-  } else {
-    ctx.fillStyle = "#ffffff";
-  }
-  ctx.save();
-  ctx.translate(cx, cy);
-  // 居中对齐
-  if (typeof ctx.setTextAlign === "function") {
-    ctx.setTextAlign("center");
-  } else {
-    ctx.textAlign = "center";
-  }
-  if (typeof ctx.setTextBaseline === "function") {
-    ctx.setTextBaseline("middle");
-  } else {
-    ctx.textBaseline = "middle";
-  }
-  ctx.scale(0.7, 1);
-  ctx.fillText(String(text ?? ""), 0, 0);
-  ctx.restore();
-}
-
-// 将文本按字符拆分并依次向右绘制，每个字符有白色背景，背景宽度根据字符宽度+内边距动态计算
-export function drawTextBoxesLine(
-  ctx,
-  text,
-  startX,
-  baselineY,
-  fontSize = 9,
-  padding = 10,
-  bgColor = "#fff",
-  textColor = "#000",
-  radius = 4,
-  gap = 0
-) {
-  const str = String(text || "");
-  // 确保测量宽度使用一致的字号
-  ctx.setFontSize(fontSize);
-  const w = ctx.measureText(str).width; // 整段文本宽度
-  const hPadding = padding + 4; // 左右额外加宽，保持高度不变
-  const rectW = Math.ceil(w) + hPadding * 2;
-  const rectH = fontSize + padding * 2;
-  const rectY = baselineY - fontSize - padding / 1.3; // 使文字基线位于背景内部
-  drawRoundedRect(ctx, startX, rectY, rectW, rectH, radius, bgColor, null, 0);
-  // 文本在背景内居中显示
-  renderText(
-    ctx,
-    str,
-    fontSize,
-    textColor,
-    startX + rectW / 2,
-    baselineY,
-    "center"
-  );
-  return startX + rectW + gap;
-}
-
 export function renderRankTitle(ctx, text) {
   const fontSize = 8;
   const textWidth = ctx.measureText(text).width;
@@ -435,7 +219,7 @@ export const drawRoundImage = async (
   }
 };
 
-const loadImage = (src) =>
+export const loadImage = (src) =>
   new Promise((resolve, reject) => {
     try {
       uni.getImageInfo({
@@ -526,21 +310,64 @@ export async function generateCanvasImage(canvasId, type, user, data) {
 
 export const wxShare = async (canvasId = "shareCanvas") => {
   try {
+    // 先尝试按 id 查找 <canvas type="2d"> 节点
+    const { pixelRatio: dpr = 1 } = uni.getSystemInfoSync() || {};
+    const info = await new Promise((resolve) => {
+      const query = uni.createSelectorQuery();
+      query
+        .select(`#${canvasId}`)
+        .fields({ node: true, size: true })
+        .exec((res) => resolve(res && res[0]));
+    });
+
+    const canvas = info?.node;
+    const cssWidth = info?.width;
+    const cssHeight = info?.height;
+
+    if (canvas && typeof canvas.getContext === "function") {
+      // 2D 画布导出：传入 canvas 节点
+      const tempPath = await new Promise((resolve, reject) => {
+        uni.canvasToTempFilePath({
+          canvas,
+          width: cssWidth,
+          height: cssHeight,
+          // 按 DPR 导出更清晰的图片
+          destWidth: Math.round(cssWidth * dpr),
+          destHeight: Math.round(cssHeight * dpr),
+          fileType: "png",
+          quality: 1,
+          success: (r) => {
+            const p = r.tempFilePath || r.apFilePath || r.filePath;
+            resolve(p);
+          },
+          fail: reject,
+        });
+      });
+      wx.showShareImageMenu({
+        entrancePath: "pages/index",
+        path: tempPath,
+      });
+      return tempPath;
+    }
+
+    // 回退：旧版非 2D 画布（通过 canvasId 导出）
     const res = await uni.canvasToTempFilePath({
       canvasId,
-      fileType: "png", // 图片格式，可选 jpg 或 png
-      quality: 1, // 图片质量，取值范围为 0-1
+      fileType: "png",
+      quality: 1,
     });
     wx.showShareImageMenu({
       entrancePath: "pages/index",
       path: res.tempFilePath,
     });
+    return res.tempFilePath;
   } catch (error) {
     console.log("生成图片失败:", error);
     uni.showToast({
       title: "生成图片失败",
       icon: "error",
     });
+    throw error;
   }
 };
 
@@ -966,190 +793,6 @@ export const generateShareCard = (canvasId, date, actual, total) => {
   }
 };
 
-export function drawLine(ctx, x1, y1, x2, y2, color = "#000", width = 1) {
-  ctx.beginPath();
-  ctx.lineWidth = width;
-  ctx.strokeStyle = color;
-  ctx.moveTo(x1, y1);
-  ctx.lineTo(x2, y2);
-  ctx.stroke();
-}
-
-export const generateShareImage = async (canvasId, data) => {
-  try {
-    const pointBook = uni.getStorageSync("point-book");
-    const arrowData = data.groups && data.groups[0] ? data.groups[0] : {};
-    const hasPoint = arrowData.list.some((arrow) => arrow.x && arrow.y);
-    const ctx = uni.createCanvasContext(canvasId);
-
-    const width = 375;
-    const height = hasPoint ? 800 : 440;
-
-    ctx.setFillStyle("#F5F5F5");
-    ctx.fillRect(0, 0, width, height);
-
-    const bgUrl = await loadImage(
-      "https://static.shelingxingqiu.com/attachment/2025-11-14/de88ugdgqwecnmsqfv.png"
-    );
-    ctx.drawImage(bgUrl, 0, 0, width, 300);
-    const avatarUrl = await loadImage(data.user.avatar);
-    drawRoundImage(ctx, avatarUrl, 13, 13, 54, 54, 27, "#000", 1);
-    renderText(ctx, data.user.name, 18, "#000", 84, 36);
-    renderText(ctx, data.recordDate, 9, "#fff", 350, 24, "center", 39);
-    renderText(ctx, "今日打卡", 13, "#fff", 336, 38, "center", 39);
-    // 以第一个字的 x 为起点，右侧字符依次向右排列，每个字符有白色背景并留 5 像素内边距
-    let cursorX = 84;
-    cursorX = drawTextBoxesLine(
-      ctx,
-      pointBook.bowType.name,
-      cursorX,
-      58,
-      9,
-      5,
-      "#fff",
-      "#000",
-      6,
-      2
-    );
-    cursorX = drawTextBoxesLine(
-      ctx,
-      String(pointBook.distance) + " 米",
-      cursorX + 6,
-      58,
-      9,
-      5,
-      "#fff",
-      "#000",
-      6,
-      2
-    );
-    cursorX = drawTextBoxesLine(
-      ctx,
-      pointBook.bowtargetType.name,
-      cursorX + 6,
-      58,
-      9,
-      5,
-      "#fff",
-      "#000",
-      6,
-      2
-    );
-    renderText(ctx, "落点稳定性", 13, "#999", 25, 110);
-    renderText(ctx, "黄心率", 13, "#999", 145, 110);
-    renderText(ctx, "10环数", 13, "#999", 262, 110);
-
-    renderText(ctx, arrowData.stability, 15, "#000", 25, 133);
-    renderText(
-      ctx,
-      Number((arrowData.yellowRate * 100).toFixed(2)) + "%",
-      15,
-      "#000",
-      145,
-      133
-    );
-    renderText(ctx, arrowData.tenRings, 15, "#000", 262, 133);
-    renderText(ctx, "平均环数", 13, "#999", 25, 175);
-    renderText(ctx, "总换数", 13, "#999", 145, 175);
-    renderText(ctx, arrowData.averageRing, 15, "#000", 25, 200);
-    renderText(
-      ctx,
-      `${arrowData.userTotalRing}/${arrowData.totalRing}`,
-      15,
-      "#000",
-      145,
-      200
-    );
-    if (hasPoint) {
-      drawRoundedRect(ctx, 20, 230, 5, 15, 5, "#FED847");
-      renderText(ctx, "落点分布", 13, "#999", 32, 242);
-      const bowUrl = await loadImage(pointBook.bowtargetType.iconPng);
-      ctx.drawImage(bowUrl, 375 * 0.08, 250, 375 * 0.84, 375 * 0.84);
-      arrowData.list.forEach((arrow, index) => {
-        const px = 375 * 0.08 + 375 * 0.84 * arrow.x;
-        const py = 250 + 375 * 0.84 * arrow.y;
-        drawRingCircle(ctx, px, py, index + 1);
-      });
-    }
-    const ringNames = ["X", 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, "M"];
-    const ringBarHeight = hasPoint ? 700 : 340;
-    // 统计每个环数的次数
-    let rings = new Array(12).fill(0);
-    arrowData.list.forEach((arrow) => {
-      if (arrow.ring === 0) rings[0]++;
-      else if (arrow.ring === -1) rings[11]++;
-      else rings[arrow.ring]++;
-    });
-    [rings[0], rings[11]] = [rings[11], rings[0]];
-    rings = rings.reverse();
-    rings = rings.map((count) => ({
-      count,
-      rate: count / arrowData.list.length,
-    }));
-    // 渲染柱子
-    const barColor = (rate) => {
-      if (rate >= 0.4) return "#FDC540";
-      if (rate >= 0.2) return "#FED847";
-      return "#ffe88f";
-    };
-    const barWidth = 20;
-    const barSpacing = 7.1;
-    const startX = 38;
-    const startY = ringBarHeight - 15;
-    rings.forEach((ring, index) => {
-      const barHeight = ring.rate * 90;
-      if (ring.rate > 0) {
-        renderText(
-          ctx,
-          Number((ring.rate * 100).toFixed(1)) + "%",
-          9,
-          "#333",
-          startX + index * (barWidth + barSpacing),
-          startY - barHeight - (hasPoint ? 6 : 3)
-        );
-      }
-      ctx.fillStyle = barColor(ring.rate);
-      ctx.fillRect(
-        startX + index * (barWidth + barSpacing),
-        startY - barHeight,
-        barWidth,
-        barHeight
-      );
-    });
-
-    renderText(ctx, "环值", 9, "#999", 15, ringBarHeight - 1);
-    ringNames.forEach((ring, index) => {
-      renderText(
-        ctx,
-        ring,
-        11,
-        "#333",
-        48 + index * 27,
-        ringBarHeight,
-        "center"
-      );
-    });
-    drawLine(ctx, 15, ringBarHeight - 15, 362, ringBarHeight - 15, "#333");
-    const pointBookQrcodeUrl = await loadImage(
-      "https://static.shelingxingqiu.com/attachment/2025-11-13/de7fzgghsfgqu0ytu6.png"
-    );
-    ctx.drawImage(pointBookQrcodeUrl, 40, hasPoint ? 715 : 358, 68, 68);
-    renderText(ctx, "射灵星球", 18, "#333", 120, hasPoint ? 734 : 380);
-    renderText(
-      ctx,
-      "高效记录每一箭，快来一起打卡吧！",
-      13,
-      "#999",
-      120,
-      hasPoint ? 756 : 402
-    );
-    renderText(ctx, "扫码打卡", 13, "#FFA118", 120, hasPoint ? 777 : 422);
-    ctx.draw();
-  } catch (e) {
-    console.error("generateShareImage 绘制失败:", e);
-  }
-};
-
 export const getDirectionText = (angle = 0) => {
   if (angle < 0) return "";
   if (angle >= 337.5 || angle < 22.5) {