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

add grid

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-23 23:40:31 +02:00
parent 8c9ad7fdc3
commit cbae0a0d41
2 changed files with 103 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
grid.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="grid.js"></script>
</html>

91
grid.js Normal file
View File

@ -0,0 +1,91 @@
const cellSize = 150;
const size = cellSize * 3;
const margin = 10;
let ctx = undefined;
let initialPos = undefined;
let circle = true;
function resizeCanvas() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
function drawGrid() {
ctx.strokeStyle = "white";
ctx.lineWidth = 5;
for (let x = 1; x < 3; ++x) {
ctx.moveTo(initialPos.x + x * cellSize, 0 + initialPos.y);
ctx.lineTo(initialPos.x + x * cellSize, initialPos.y + size);
}
for (let y = 1; y < 3; ++y) {
ctx.moveTo(initialPos.x + 0, initialPos.y + y * cellSize);
ctx.lineTo(initialPos.x + size, initialPos.y + y * cellSize);
}
ctx.stroke();
}
function drawCircle(x, y) {
ctx.beginPath();
// arc(x, y, radius, startAngle, endAngle)
ctx.arc(x, y, 50, 0, Math.PI * 2);
ctx.stroke();
}
function drawCross(x, y) {
startPoint = { x: x-50, y: y-50 };
ctx.beginPath();
ctx.moveTo(startPoint.x, startPoint.y);
ctx.lineTo(startPoint.x + 100, startPoint.y + 100);
ctx.moveTo(startPoint.x + 100, startPoint.y);
ctx.lineTo(startPoint.x, startPoint.y + 100);
ctx.stroke();
}
function init() {
const canvas = document.getElementById("canvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
resizeCanvas(ctx); // Init canvas
ctx.fillStyle = "red";
initialPos = {
x: ctx.canvas.width / 2 - size / 2,
y: ctx.canvas.height / 2 - size / 2
};
ctx.fillRect(initialPos.x, initialPos.y, 5, 5); // origin of grid
canvas.addEventListener("click", (evt) => {
const {clientX, clientY} = evt;
// Coord relative to origin of the grid (initialPos)
const pt = { x: clientX - initialPos.x, y: clientY - initialPos.y };
const gridIndex = {
x: Math.floor(3 * pt.x / size),
y: Math.floor(3 * pt.y / size)
};
if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) {
ctx.fillStyle = "blue";
const center = {
x: initialPos.x + gridIndex.x * cellSize + cellSize/2,
y: initialPos.y + gridIndex.y * cellSize + cellSize/2
};
if (circle) drawCircle(center.x, center.y);
else drawCross(center.x, center.y);
circle = !circle;
}
});
//window.addEventListener('resize', () => resizeCanvas(ctx));
//window.requestAnimationFrame(time => update(ctx, time))
drawGrid(ctx);
}
}
init();