項目中需要根據選擇的印章名稱，動態生成印章 ，印章下方顯示當前的日期 代碼如下

<template><div><label for="name">選擇名稱：</label><select id="name" v-model="selectedName"><option value="name1">名稱1</option><option value="name2">名稱2</option><option value="name3">名稱3</option></select><button @click="generateStampImage">生成印章圖片</button><div ref="stampContainer" v-if="stampGenerated"><img :src="stampImage" alt="印章" /></div></div>
</template>export default {data() {return {selectedName: '',stampGenerated: false,stampImage: ''};},
methods: {generateStampImage() {const stampText = this.selectedName;const canvas = document.createElement("canvas");canvas.width = 100; // 縮小印章尺寸canvas.height = 100;const ctx = canvas.getContext("2d");// 繪制圓形邊框ctx.beginPath();ctx.arc(80, 80, 75, 0, 2 * Math.PI, false);ctx.fillStyle = "white";ctx.fill();ctx.lineWidth = 3;ctx.strokeStyle = "red";ctx.stroke();// 繪制五角星this.drawStar(ctx, 80, 80, 5, 30, 15); // 適當調整五角星大小ctx.fillStyle = "red";ctx.fill();// 繪制弧形文本this.drawCircularText(ctx, stampText, 80, 80, 60, -Math.PI / 2, "red"); // 調整文本的起始角度// 繪制日期ctx.font = "14px Arial";ctx.fillStyle = "red";ctx.textAlign = "center";ctx.fillText(this.currentDate, 80, 120); // 日期顯示在五角星下方const stampImage = canvas.toDataURL("image/png");this.stampGenerated = true;this.stampImage = stampImage;},drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {let rot = (Math.PI / 2) * 3;let x = cx;let y = cy;const step = Math.PI / spikes;ctx.beginPath();ctx.moveTo(cx, cy - outerRadius);for (let i = 0; i < spikes; i++) {x = cx + Math.cos(rot) * outerRadius;y = cy + Math.sin(rot) * outerRadius;ctx.lineTo(x, y);rot += step;x = cx + Math.cos(rot) * innerRadius;y = cy + Math.sin(rot) * innerRadius;ctx.lineTo(x, y);rot += step;}ctx.lineTo(cx, cy - outerRadius);ctx.closePath();},drawCircularText(ctx, text, x, y, radius, color) {ctx.fillStyle = color;ctx.font = '16px Arial';ctx.textBaseline = 'middle';let startAngle = -Math.PI; // 開始于水平左側let totalAngle = 0; // 計算總角度// 計算文本占據的總角度for (let i = 0; i < text.length; i++) {totalAngle += ctx.measureText(text[i]).width / radius;}// 調整開始角度，使文本居中startAngle += (Math.PI - totalAngle) / 2;for (let i = 0; i < text.length; i++) {const char = text[i];const charWidth = ctx.measureText(char).width;const angle = startAngle + charWidth / (2 * radius);ctx.save();ctx.translate(x + Math.cos(angle) * radius, y + Math.sin(angle) * radius);ctx.rotate(angle + Math.PI / 2);ctx.fillText(char, -charWidth / 2, 0);ctx.restore();startAngle += charWidth / radius;}},
}}

使用的地方調用： this.generateStampImage();即可
生成的效果如下