style: arc ticks taper from 2x at bottom to 1x at top
This commit is contained in:
@@ -103,12 +103,15 @@ const M={aspect_ratio:"16:9",render_mode:"contain"};let GAME_ID='';
|
|||||||
ctx.clearRect(0,0,W,H);
|
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);
|
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
|
// 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
|
// progress
|
||||||
const pc=Math.min(cur/max,1),on=Math.round(pc*N),rl=max*.85;
|
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
|
// scale nums - larger
|
||||||
const sx=Ca/640*W,sy=Cb/480*H,sr=Cr/640*W;
|
const sx=Ca/640*W,sy=Cb/480*H,sr=Cr/640*W;
|
||||||
|
|||||||
Reference in New Issue
Block a user