style: arc ticks taper from 2x at bottom to 1x at top

This commit is contained in:
2026-07-25 17:17:02 +08:00
parent 7f65dd2fd2
commit a14ca6a607
+5 -2
View File
@@ -103,12 +103,15 @@ const M={aspect_ratio:"16:9",render_mode:"contain"};let GAME_ID='';
ctx.clearRect(0,0,W,H);
const tw=Math.max(54,W/11),th=Math.max(18,H/24),gap=Math.max(2,tw*.06);
// tick thickness varies: 2x at bottom arc, 1x at top
function twScale(i){if(i>=Na)return 1;return 2-(i/(Na-1))}
// bg ticks
for(let i=0;i<N;i++){const p=tp(i);ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.r);ctx.fillStyle='rgba(255,255,255,.04)';ctx.fillRect(-tw/2,-th/2,tw-gap,th);ctx.restore()}
for(let i=0;i<N;i++){const p=tp(i),s=twScale(i),w=(tw-gap)*s,h=th*s;ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.r);ctx.fillStyle='rgba(255,255,255,.04)';ctx.fillRect(-w/2,-h/2,w,h);ctx.restore()}
// progress
const pc=Math.min(cur/max,1),on=Math.round(pc*N),rl=max*.85;
for(let i=0;i<on;i++){const p=tp(i);ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.r);ctx.fillStyle=cur>=rl?'rgba(255,50,35,.95)':'rgba(255,255,255,.85)';ctx.fillRect(-tw/2,-th/2,tw-gap,th);ctx.restore()}
for(let i=0;i<on;i++){const p=tp(i),s=twScale(i),w=(tw-gap)*s,h=th*s;ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.r);ctx.fillStyle=cur>=rl?'rgba(255,50,35,.95)':'rgba(255,255,255,.85)';ctx.fillRect(-w/2,-h/2,w,h);ctx.restore()}
// scale nums - larger
const sx=Ca/640*W,sy=Cb/480*H,sr=Cr/640*W;