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

initial commit

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-23 17:58:55 +02:00
commit e1573b6d36
2 changed files with 105 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin: 0; padding 0; overflow: hidden; background-color: #000000">
<canvas id="canvas" width="800" height="600"></canvas>
</body>
<script src="main.js"></script>
</html>

93
main.js Normal file
View File

@ -0,0 +1,93 @@
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 circles = [];
let crosses = [];
let pendingClicks = [];
function animate(ctx, time) {
if (!startTime) {
startTime = time;
}
for (const evt of pendingClicks) {
const h = Math.floor(Math.random() * 255);
if (evt.kind == "circle") {
circles.push({x: evt.x, y: evt.y, t: time, hue: h});
} else if (evt.kind == "cross") {
crosses.push({x: evt.x, y: evt.y, t: time, hue: h});
}
}
pendingClicks = [];
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for (const circle of circles) {
const dt = time - circle.t;
drawAnimatedCircle(ctx, dt, circle.x, circle.y, circle.hue);
}
for (const cross of crosses) {
drawCross(ctx, cross.hue);
}
window.requestAnimationFrame(time => animate(ctx, time));
}
function drawAnimatedCircle(ctx, dt, x, y, hue) {
const end = dt*((2*Math.PI) / 1000);
ctx.save();
ctx.beginPath();
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));
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
ctx.lineWidth = 5;
ctx.stroke();
ctx.restore();
}
function resizeCanvas(ctx) {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
function init() {
const canvas = document.getElementById("canvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
resizeCanvas(ctx); // Init canvas
window.addEventListener('resize', () => resizeCanvas(ctx));
window.requestAnimationFrame(time => animate(ctx, time))
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;
pendingClicks.push({x: clientX, y: clientY, kind: "cross"});
});
}
}
init();