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

small refactor and reformat

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-23 22:27:18 +02:00
parent 9dd3b6487a
commit 8c9ad7fdc3
1 changed files with 46 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
main.js
View File

@ -1,45 +1,26 @@
function drawCross(ctx, hue) {
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 300);
ctx.moveTo(300, 200);
ctx.lineTo(200, 300);
ctx.lineWidth = 5;
ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 1)`;
ctx.stroke();
}
function drawCircle(ctx) {
ctx.beginPath();
// arc(x, y, radius, startAngle, endAngle)
ctx.arc(75, 75, 50, 0, Math.PI * 2);
ctx.stroke();
}
let startTime = undefined; let startTime = undefined;
let shapes = []; let shapes = [];
let pendingClicks = []; let pendingClicks = [];
function animate(ctx, time) { function update(ctx, time) {
if (!startTime) { if (!startTime) {
startTime = time; startTime = 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") {
shapes.push({kind: evt.kind, 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") {
shapes.push({kind: evt.kind, 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 shape of shapes) { for (const shape of shapes) {
const dt = time - shape.t; const dt = time - shape.t;
switch (shape.kind) { switch (shape.kind) {
case "circle": case "circle":
drawAnimatedCircle(ctx, dt, shape.x, shape.y, shape.hue); drawAnimatedCircle(ctx, dt, shape.x, shape.y, shape.hue);
@ -48,19 +29,19 @@ function animate(ctx, time) {
drawAnimatedCross(ctx, dt, shape.x, shape.y, shape.hue); drawAnimatedCross(ctx, dt, shape.x, shape.y, shape.hue);
break; break;
} }
} }
window.requestAnimationFrame(time => animate(ctx, time)); window.requestAnimationFrame(time => update(ctx, time));
} }
function drawAnimatedCircle(ctx, dt, x, y, hue) { function drawAnimatedCircle(ctx, dt, x, y, hue) {
const end = dt*2*Math.PI/500; 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));
const percent = Math.trunc(100*Math.min(end, 2*Math.PI)/(2*Math.PI)); const percent = Math.trunc(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();
ctx.restore(); ctx.restore();
} }
@ -82,36 +63,36 @@ function drawAnimatedCross(ctx, dt, x, y, hue) {
} }
ctx.lineWidth = 5; ctx.lineWidth = 5;
const percent = Math.trunc(100*Math.min(delta, 100)/100); const percent = Math.trunc(100*Math.min(delta, 100)/100);
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`; ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
ctx.stroke(); 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;
} }
function init() { function init() {
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
if (canvas.getContext) { if (canvas.getContext) {
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
resizeCanvas(ctx); // Init canvas resizeCanvas(ctx); // Init canvas
window.addEventListener('resize', () => resizeCanvas(ctx)); canvas.addEventListener("click", (evt) => {
window.requestAnimationFrame(time => animate(ctx, time)) const {clientX, clientY} = evt;
pendingClicks.push({x: clientX, y: clientY, kind: "circle"});
canvas.addEventListener("click", (evt) => { });
const {clientX, clientY} = evt;
pendingClicks.push({x: clientX, y: clientY, kind: "circle"}); canvas.addEventListener("contextmenu", (evt) => {
}); evt.preventDefault();
const {clientX, clientY} = evt;
canvas.addEventListener("contextmenu", (evt) => { pendingClicks.push({x: clientX, y: clientY, kind: "cross"});
evt.preventDefault(); });
const {clientX, clientY} = evt;
pendingClicks.push({x: clientX, y: clientY, kind: "cross"}); window.addEventListener('resize', () => resizeCanvas(ctx));
}); window.requestAnimationFrame(time => update(ctx, time))
} }
} }
init(); init();