完成不同练习生成不同截图

src/util.js

@@ -1,3 +1,48 @@
+export function renderScores(ctx, arrows = []) {
+  let rowIndex = 0;
+  arrows.forEach((item, i) => {
+    rowIndex = i;
+    if (arrows.length === 12) {
+      if (i > 5) rowIndex = i - 6;
+      ctx.drawImage(
+        "../static/score-bg.png",
+        16 + rowIndex * 46,
+        i > 5 ? 366 : 320,
+        40,
+        40
+      );
+      renderText(
+        ctx,
+        item.ring,
+        25,
+        "#fed847",
+        36 + rowIndex * 46,
+        i > 5 ? 395 : 349,
+        "center"
+      );
+    }
+    if (arrows.length === 36) {
+      ctx.drawImage(
+        "../static/score-bg.png",
+        18 + (i % 9) * 30,
+        290 + Math.ceil((i + 1) / 9) * 30,
+        27,
+        27,
+        "center"
+      );
+      renderText(
+        ctx,
+        item.ring,
+        18,
+        "#fed847",
+        31 + (i % 9) * 30,
+        310 + Math.ceil((i + 1) / 9) * 30,
+        "center"
+      );
+    }
+  });
+}
+
 export function renderLine(ctx, from) {
   ctx.beginPath();
   ctx.lineWidth = 1;
@@ -8,9 +53,10 @@ export function renderLine(ctx, from) {
   ctx.stroke();
 }
 
-export function renderText(ctx, text, size, color, x, y) {
+export function renderText(ctx, text, size, color, x, y, textAlign = "left") {
   ctx.setFontSize(size);
   ctx.setFillStyle(color);
+  ctx.setTextAlign(textAlign);
   ctx.fillText(text, x, y);
 }
 
@@ -19,11 +65,11 @@ export function renderRankTitle(ctx, text) {
   const textWidth = ctx.measureText(text).width;
   const padding = 8; // 文字与背景边缘的间距
   const radius = 10; // 圆角半径
-  const textX = 75;
+  const textX = 85;
   const textY = 55;
-  const x = textX - padding; // 文字 x 坐标减去内边距
+  const x = textX - padding - 15; // 文字 x 坐标减去内边距
   const y = textY - fontSize - padding / 2 + 1; // 文字 y 坐标减去字体大小和内边距
-  const width = textWidth + padding * 2 - 15; // 背景宽度
+  const width = textWidth + padding * 2 - 19; // 背景宽度
   const height = fontSize + padding + 1; // 背景高度
 
   // 开始绘制圆角矩形
@@ -49,3 +95,39 @@ export function renderRankTitle(ctx, text) {
   ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
   ctx.fillText(text, textX, textY); // 绘制文字
 }
+
+export const drawRoundImage = async (
+  ctx,
+  imgPath,
+  x,
+  y,
+  width,
+  height,
+  radius
+) => {
+  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(imgPath, x, y, width, height);
+  ctx.restore();
+};