1. 修复海报图片
This commit is contained in:
46
vite-tailwindcss/src/composables/drawXiSeal.js
Normal file
46
vite-tailwindcss/src/composables/drawXiSeal.js
Normal file
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* 在 canvas 上绘制圆内「囍」印章。
|
||||
* 用位图避免 html2canvas 对 CJK + transform/flex 居中错位。
|
||||
*/
|
||||
export function drawXiSeal(canvas, {
|
||||
size = 28,
|
||||
fontSize = 13,
|
||||
color = '#d4af37',
|
||||
borderColor = '#d4af37',
|
||||
fill = 'rgba(0, 0, 0, 0.15)',
|
||||
dpr = Math.min(3, window.devicePixelRatio || 2),
|
||||
} = {}) {
|
||||
if (!canvas) return
|
||||
const s = Math.max(12, Number(size) || 28)
|
||||
const fs = Math.max(8, Number(fontSize) || Math.round(s * 0.46))
|
||||
const ratio = Math.max(1, Number(dpr) || 2)
|
||||
|
||||
canvas.width = Math.round(s * ratio)
|
||||
canvas.height = Math.round(s * ratio)
|
||||
canvas.style.width = `${s}px`
|
||||
canvas.style.height = `${s}px`
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
|
||||
ctx.clearRect(0, 0, s, s)
|
||||
|
||||
const cx = s / 2
|
||||
const cy = s / 2
|
||||
const r = s / 2 - 0.75
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(cx, cy, r, 0, Math.PI * 2)
|
||||
ctx.fillStyle = fill
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 1
|
||||
ctx.strokeStyle = borderColor
|
||||
ctx.stroke()
|
||||
|
||||
ctx.fillStyle = color
|
||||
ctx.font = `700 ${fs}px "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif`
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
// 轻微上移做视觉光学居中(非 CSS transform,导出安全)
|
||||
ctx.fillText('囍', cx, cy + fs * 0.04)
|
||||
}
|
||||
Reference in New Issue
Block a user