|
@@ -179,69 +179,67 @@ export function renderStar(ctx, w, h, ts, options) {
|
|
|
export function drawTaiji(ctx, cx, cy, r, familyEnergy, personalEnergy) {
|
|
export function drawTaiji(ctx, cx, cy, r, familyEnergy, personalEnergy) {
|
|
|
ctx.save()
|
|
ctx.save()
|
|
|
|
|
|
|
|
- // 1. 外圆背景(白色底)
|
|
|
|
|
|
|
+ // 1. 外圆背景(透明,仅保留极淡边框)
|
|
|
ctx.beginPath()
|
|
ctx.beginPath()
|
|
|
ctx.arc(cx, cy, r, 0, Math.PI * 2)
|
|
ctx.arc(cx, cy, r, 0, Math.PI * 2)
|
|
|
ctx.closePath()
|
|
ctx.closePath()
|
|
|
- ctx.fillStyle = '#fff'
|
|
|
|
|
- ctx.fill()
|
|
|
|
|
- ctx.strokeStyle = 'rgba(0,0,0,0.15)'
|
|
|
|
|
- ctx.lineWidth = 1
|
|
|
|
|
|
|
+ ctx.strokeStyle = 'rgba(0,0,0,0.08)'
|
|
|
|
|
+ ctx.lineWidth = 0.5
|
|
|
ctx.stroke()
|
|
ctx.stroke()
|
|
|
|
|
|
|
|
- // 2. 左半边(阴,黑色)
|
|
|
|
|
|
|
+ // 2. 左半边(阴,半透明)
|
|
|
ctx.beginPath()
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(cx, cy)
|
|
ctx.moveTo(cx, cy)
|
|
|
ctx.arc(cx, cy, r, Math.PI / 2, -Math.PI / 2)
|
|
ctx.arc(cx, cy, r, Math.PI / 2, -Math.PI / 2)
|
|
|
ctx.closePath()
|
|
ctx.closePath()
|
|
|
- ctx.fillStyle = '#000'
|
|
|
|
|
|
|
+ ctx.fillStyle = 'rgba(120,120,120,0.2)'
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
|
- // 3. 上半小圆左半弧(白色,在黑色半圆中)
|
|
|
|
|
|
|
+ // 3. 上半小圆左半弧(半透明浅色,在暗半圆中)
|
|
|
ctx.beginPath()
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(cx, cy - r)
|
|
ctx.moveTo(cx, cy - r)
|
|
|
ctx.arc(cx, cy - r / 2, r / 2, Math.PI / 2, -Math.PI / 2)
|
|
ctx.arc(cx, cy - r / 2, r / 2, Math.PI / 2, -Math.PI / 2)
|
|
|
ctx.closePath()
|
|
ctx.closePath()
|
|
|
- ctx.fillStyle = '#fff'
|
|
|
|
|
|
|
+ ctx.fillStyle = 'rgba(255,255,255,0.35)'
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
|
- // 4. 下半小圆右半弧(黑色,在白色半圆中)
|
|
|
|
|
|
|
+ // 4. 下半小圆右半弧(半透明深色,在浅半圆中)
|
|
|
ctx.beginPath()
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(cx, cy + r)
|
|
ctx.moveTo(cx, cy + r)
|
|
|
ctx.arc(cx, cy + r / 2, r / 2, -Math.PI / 2, Math.PI / 2)
|
|
ctx.arc(cx, cy + r / 2, r / 2, -Math.PI / 2, Math.PI / 2)
|
|
|
ctx.closePath()
|
|
ctx.closePath()
|
|
|
- ctx.fillStyle = '#000'
|
|
|
|
|
|
|
+ ctx.fillStyle = 'rgba(120,120,120,0.2)'
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
|
// 鱼眼半径(够大,容纳数值文字)
|
|
// 鱼眼半径(够大,容纳数值文字)
|
|
|
var eyeR = r * 0.16
|
|
var eyeR = r * 0.16
|
|
|
|
|
|
|
|
- // 5. 阳鱼眼(白色区域中的黑点 → 写白色文字)
|
|
|
|
|
|
|
+ // 5. 阳鱼眼(浅区域中的暗点)
|
|
|
ctx.beginPath()
|
|
ctx.beginPath()
|
|
|
ctx.arc(cx, cy + r / 2, eyeR, 0, Math.PI * 2)
|
|
ctx.arc(cx, cy + r / 2, eyeR, 0, Math.PI * 2)
|
|
|
ctx.closePath()
|
|
ctx.closePath()
|
|
|
- ctx.fillStyle = '#000'
|
|
|
|
|
|
|
+ ctx.fillStyle = 'rgba(100,100,100,0.4)'
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
|
- // 6. 阴鱼眼(黑色区域中的白点 → 写黑色文字)
|
|
|
|
|
|
|
+ // 6. 阴鱼眼(暗区域中的亮点)
|
|
|
ctx.beginPath()
|
|
ctx.beginPath()
|
|
|
ctx.arc(cx, cy - r / 2, eyeR, 0, Math.PI * 2)
|
|
ctx.arc(cx, cy - r / 2, eyeR, 0, Math.PI * 2)
|
|
|
ctx.closePath()
|
|
ctx.closePath()
|
|
|
- ctx.fillStyle = '#fff'
|
|
|
|
|
|
|
+ ctx.fillStyle = 'rgba(255,255,255,0.5)'
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
|
- // 7. 阳眼文字(黑底上写白色)— 家庭能量
|
|
|
|
|
|
|
+ // 7. 阳眼文字 — 家庭能量
|
|
|
var familyVal = (familyEnergy != null && !isNaN(familyEnergy)) ? Math.round(familyEnergy) : '--'
|
|
var familyVal = (familyEnergy != null && !isNaN(familyEnergy)) ? Math.round(familyEnergy) : '--'
|
|
|
var eyeFontSize = Math.round(eyeR * 1.2)
|
|
var eyeFontSize = Math.round(eyeR * 1.2)
|
|
|
ctx.font = 'bold ' + eyeFontSize + 'px sans-serif'
|
|
ctx.font = 'bold ' + eyeFontSize + 'px sans-serif'
|
|
|
ctx.textAlign = 'center'
|
|
ctx.textAlign = 'center'
|
|
|
ctx.textBaseline = 'middle'
|
|
ctx.textBaseline = 'middle'
|
|
|
- ctx.fillStyle = '#fff'
|
|
|
|
|
|
|
+ ctx.fillStyle = 'rgba(255,255,255,0.85)'
|
|
|
ctx.fillText(familyVal + '', cx, cy + r / 2)
|
|
ctx.fillText(familyVal + '', cx, cy + r / 2)
|
|
|
|
|
|
|
|
- // 8. 阴眼文字(白底上写黑色)— 个人能量
|
|
|
|
|
|
|
+ // 8. 阴眼文字 — 个人能量
|
|
|
var personalVal = (personalEnergy != null && !isNaN(personalEnergy)) ? Math.round(personalEnergy) : '--'
|
|
var personalVal = (personalEnergy != null && !isNaN(personalEnergy)) ? Math.round(personalEnergy) : '--'
|
|
|
- ctx.fillStyle = '#000'
|
|
|
|
|
|
|
+ ctx.fillStyle = 'rgba(80,80,80,0.7)'
|
|
|
ctx.fillText(personalVal + '', cx, cy - r / 2)
|
|
ctx.fillText(personalVal + '', cx, cy - r / 2)
|
|
|
|
|
|
|
|
ctx.restore()
|
|
ctx.restore()
|