feat: canvas 示例

src/views/demo/canvasExample.vue

@@ -190,6 +190,39 @@ const startDraw = function () {
         }
     }
 
+    // 绘制雷达图区域
+    function drawRadar(maxRadius, data) {
+        ctx.beginPath();
+        for (let i = 0; i < 6; i++) {
+            const value = data[i].value || 0;
+            // 计算当前点的半径长度：(值 / 100) * 最大半径
+            const currentRadius = (value / 100) * maxRadius;
+
+            const angle = (Math.PI / 3) * i + Math.PI / 2;
+            const x = centerX + currentRadius * Math.cos(angle);
+            const y = centerY + currentRadius * Math.sin(angle);
+
+            if (i === 0) {
+                ctx.moveTo(x, y);
+            } else {
+                ctx.lineTo(x, y);
+            }
+        }
+        ctx.closePath();
+
+        // 径向渐变：中心深 -> 边缘浅
+        const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, maxRadius);
+        gradient.addColorStop(1, 'rgba(255, 240, 231, 0)');
+        gradient.addColorStop(0, 'rgba(248, 159, 107, 1)');
+
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        // 可选：添加一条描边增加清晰度
+        // ctx.strokeStyle = 'rgba(252, 201, 169, 1)';
+        // ctx.lineWidth = 1;
+        // ctx.stroke();
+    }
+
     drawBackground();
     drawHexagon(200, true);
     drawHexagon(150);
@@ -198,13 +231,17 @@ const startDraw = function () {
 
     // 在最外层六边形的角上添加文本
     const cornerData = [
-        { title: '医疗险', status: false },
+        { title: '医疗险', status: true, value: 0 },
-        { title: '定期寿险', status: true },
+        { title: '定期寿险', status: true, value: 100 }, // 已保障 -> 100
-        { title: '储蓄养老', status: false },
+        { title: '储蓄养老', status: false, value: 25 }, // 未保障 -> 25
-        { title: '家财宠险', status: true },
+        { title: '家财宠险', status: true, value: 100 }, // 已保障 -> 100
-        { title: '重疾险', status: false },
+        { title: '重疾险', status: true, value: 0 },
-        { title: '意外险', status: false },
+        { title: '意外险', status: false, value: 0 },
     ];
+
+    // 绘制雷达图 (最大半径对应第三个实心六边形，即150)
+    drawRadar(150, cornerData);
+
     drawTextAtCorners(200, cornerData);
 };
 </script>