feat: canvas 示例

src/router/modules/demo.ts

@@ -190,6 +190,10 @@ const titleArr = [
         key: 'lodashExamples',
         title: 'Lodash 经典用法',
     },
+    {
+        key: 'canvasExample',
+        title: 'canvas示例',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/canvasExample.vue

@@ -0,0 +1,128 @@
+<template>
+    <base-container>
+        <canvas
+            id="canvas-container"
+            width="600"
+            height="600"
+        ></canvas>
+    </base-container>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+
+onMounted(() => {
+    startDraw();
+});
+
+const startDraw = function () {
+    const canvas = {
+        width: 600,
+        height: 600,
+        el: document.getElementById('canvas-container'),
+    };
+    const ctx = canvas.el.getContext('2d');
+    console.log(ctx);
+
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+
+    // 画布背景颜色
+    function drawBackground() {
+        const radialGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 600);
+        radialGradient.addColorStop(0, 'rgba(248, 239, 229, 1)');
+        radialGradient.addColorStop(1, 'rgba(252, 201, 169, 1)');
+
+        ctx.fillStyle = radialGradient;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+
+    // 绘制带圆角的六边形
+    function drawHexagon(radius = 50, custom) {
+        const cornerRadius = 20; // 圆角半径（可调，控制弧度大小）
+
+        ctx.beginPath();
+
+        // 从顶部开始，逆时针绘制
+        for (let i = 0; i < 6; i++) {
+            const startAngle = (Math.PI / 3) * i + Math.PI / 2; // 当前边的起始角度（从顶部开始）
+
+            const x1 = centerX + radius * Math.cos(startAngle);
+            const y1 = centerY + radius * Math.sin(startAngle);
+
+            const prevAngle = (Math.PI / 3) * (i - 1) + Math.PI / 2;
+            const prevX = centerX + radius * Math.cos(prevAngle);
+            const prevY = centerY + radius * Math.sin(prevAngle);
+
+            // 画圆弧：从 prevX,prevY 到 x1,y1，以 cornerX,cornerY 为中心
+            ctx.arcTo(prevX, prevY, x1, y1, cornerRadius);
+        }
+
+        // 最后一段圆弧：连接最后一个点到第一个点
+        const lastAngle = (Math.PI / 3) * 5 + Math.PI / 2;
+        const firstAngle = (Math.PI / 3) * 0 + Math.PI / 2;
+        const lastX = centerX + radius * Math.cos(lastAngle);
+        const lastY = centerY + radius * Math.sin(lastAngle);
+        const firstX = centerX + radius * Math.cos(firstAngle);
+        const firstY = centerY + radius * Math.sin(firstAngle);
+        ctx.arcTo(lastX, lastY, firstX, firstY, cornerRadius - cornerRadius / 2);
+
+        // 设置样式
+        ctx.fillStyle = 'rgba(255, 248, 244, 1)';
+        ctx.strokeStyle = 'rgba(253, 201, 171, 1)';
+        ctx.lineWidth = 3;
+
+        // === 条件判断：custom 为 true 时绘制虚线边框，不填充 ===
+        if (custom) {
+            // 虚线：10px 实线 + 5px 空白
+            ctx.setLineDash([5, 8]);
+            ctx.lineDashOffset = 0;
+            ctx.stroke();
+            ctx.setLineDash([]);
+        } else {
+            ctx.fill();
+            ctx.stroke();
+        }
+    }
+
+    // 添加文本到六边形的角上
+    function drawTextAtCorners(radius, textArray) {
+        // 文本内容数组，对应六边形的6个角
+        const text = textArray || ['医疗险', '定期寿险', '储蓄养老', '家财宠险', '重疾险', '意外险'];
+        const textColors = ['#333', '#333', '#333', '#333', '#333', '#333']; // 文本颜色
+        const textSizes = [20, 20, 20, 20, 20, 20]; // 文本大小
+
+        for (let i = 0; i < 6; i++) {
+            const angle = (Math.PI / 3) * i + Math.PI / 2; // 当前角的角度（从顶部开始）
+            const x = centerX + radius * Math.cos(angle);
+            const y = centerY + radius * Math.sin(angle);
+
+            // 设置文本样式
+            ctx.font = `bold ${textSizes[i]}px Arial`;
+            ctx.fillStyle = textColors[i];
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+
+            // 绘制文本
+            ctx.fillText(text[i], x, y);
+        }
+    }
+
+    drawBackground();
+    drawHexagon(200, true);
+    drawHexagon(150);
+    drawHexagon(100);
+    drawHexagon(50);
+
+    // 在最外层六边形的角上添加文本
+    drawTextAtCorners(200, ['医疗险', '定期寿险', '储蓄养老', '家财宠险', '重疾险', '意外险']);
+};
+</script>
+
+<style lang="scss" scoped>
+#canvas-container {
+    width: 600px;
+    height: 600px;
+    margin: 0 auto;
+}
+</style>