thib8956/tic-tac-toe-ws
1
0
Fork 0
mirror of https://github.com/thib8956/tic-tac-toe-ws.git synced 2026-02-21 07:48:12 +00:00
Code Activity

fix: smooth shape animation

Browse Source 
Avoid using Math.trunc with caused stepping effect in animations
This commit is contained in:
Thibaud Gasser
2026-02-17 20:18:11 +01:00
parent 316d910185
commit 4277a0ca48
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client.ts
View File

@@ -85,7 +85,7 @@ function drawAnimatedCircle(ctx: CanvasRenderingContext2D, dt: number, x: number
ctx.save(); ctx.save();
ctx.beginPath(); ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.min(end, 2*Math.PI)); ctx.arc(x, y, radius, 0, Math.min(end, 2*Math.PI));
const percent = Math.trunc(100*Math.min(end, 2*Math.PI)/(2*Math.PI)); const percent = Math.floor(100*Math.min(end, 2*Math.PI)/(2*Math.PI));
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`; ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
ctx.lineWidth = 5; ctx.lineWidth = 5;
ctx.stroke(); ctx.stroke();
@@ -112,7 +112,7 @@ function drawAnimatedCross(ctx: CanvasRenderingContext2D, dt: number, x: number,
} }
ctx.lineWidth = 5; ctx.lineWidth = 5;
const percent = Math.trunc(100*Math.min(delta, SHAPE_SIZE)/SHAPE_SIZE); const percent = Math.floor(100*Math.min(delta, SHAPE_SIZE)/SHAPE_SIZE);
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`; ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
ctx.stroke(); ctx.stroke();
ctx.restore(); ctx.restore();