thib8956/test-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

draw animated cross

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-23 21:56:01 +02:00
parent e1573b6d36
commit 9dd3b6487a
1 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
main.js
View File

@ -19,8 +19,7 @@ function drawCircle(ctx) {
let startTime = undefined; let startTime = undefined;
let circles = []; let shapes = [];
let crosses = [];
let pendingClicks = []; let pendingClicks = [];
function animate(ctx, time) { function animate(ctx, time) {
@ -31,28 +30,31 @@ function animate(ctx, time) {
for (const evt of pendingClicks) { for (const evt of pendingClicks) {
const h = Math.floor(Math.random() * 255); const h = Math.floor(Math.random() * 255);
if (evt.kind == "circle") { if (evt.kind == "circle") {
circles.push({x: evt.x, y: evt.y, t: time, hue: h}); shapes.push({kind: evt.kind, x: evt.x, y: evt.y, t: time, hue: h});
} else if (evt.kind == "cross") { } else if (evt.kind == "cross") {
crosses.push({x: evt.x, y: evt.y, t: time, hue: h}); shapes.push({kind: evt.kind, x: evt.x, y: evt.y, t: time, hue: h});
} }
} }
pendingClicks = []; pendingClicks = [];
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for (const circle of circles) { for (const shape of shapes) {
const dt = time - circle.t; const dt = time - shape.t;
drawAnimatedCircle(ctx, dt, circle.x, circle.y, circle.hue); switch (shape.kind) {
case "circle":
drawAnimatedCircle(ctx, dt, shape.x, shape.y, shape.hue);
break;
case "cross":
drawAnimatedCross(ctx, dt, shape.x, shape.y, shape.hue);
break;
} }
for (const cross of crosses) {
drawCross(ctx, cross.hue);
} }
window.requestAnimationFrame(time => animate(ctx, time)); window.requestAnimationFrame(time => animate(ctx, time));
} }
function drawAnimatedCircle(ctx, dt, x, y, hue) { function drawAnimatedCircle(ctx, dt, x, y, hue) {
const end = dt*((2*Math.PI) / 1000); const end = dt*2*Math.PI/500;
ctx.save(); ctx.save();
ctx.beginPath(); ctx.beginPath();
ctx.arc(x, y, 50, 0, Math.min(end, 2*Math.PI)); ctx.arc(x, y, 50, 0, Math.min(end, 2*Math.PI));
@ -63,6 +65,28 @@ function drawAnimatedCircle(ctx, dt, x, y, hue) {
ctx.restore(); ctx.restore();
} }
function drawAnimatedCross(ctx, dt, x, y, hue) {
startPoint = { x: x-50, y: y-50 };
ctx.beginPath();
ctx.moveTo(startPoint.x, startPoint.y);
delta = 100*dt/250;
if (delta < 100) { // draw \
d = Math.min(delta, 100);
ctx.lineTo(startPoint.x + d, startPoint.y + d);
} else { // draw /
ctx.lineTo(startPoint.x + 100, startPoint.y + 100); // keep \ drawn
ctx.moveTo(startPoint.x + 100, startPoint.y);
d = Math.min(delta-100, 100);
ctx.lineTo(startPoint.x +100 - d, startPoint.y + d);
}
ctx.lineWidth = 5;
const percent = Math.trunc(100*Math.min(delta, 100)/100);
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
ctx.stroke();
}
function resizeCanvas(ctx) { function resizeCanvas(ctx) {
ctx.canvas.width = window.innerWidth; ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight; ctx.canvas.height = window.innerHeight;