From 0429f8183d5ccc47a24a999b8784e5bdf23bea7e Mon Sep 17 00:00:00 2001 From: Martial Simon Date: Tue, 5 Mar 2024 15:46:20 +0200 Subject: proto: drawCross fixed, still positioning the reset button --- index.html | 4 ++-- index.js | 34 +++++++++++++++++++++++----------- style.css | 4 ++++ 3 files changed, 29 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index d0de59a..194e61f 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,12 @@ -

Click anywhere on the screen to move the robot!

- \ No newline at end of file + diff --git a/index.js b/index.js index e217344..ff30475 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,6 @@ const canvas = document.getElementById('drawing-board'); const ctx = canvas.getContext('2d'); -const hit = document.getElementById("check"); +const reset = document.getElementById("reset"); const canvasOffsetX = canvas.offsetLeft; const canvasOffsetY = canvas.offsetTop; @@ -8,13 +8,16 @@ const canvasOffsetY = canvas.offsetTop; canvas.width = window.innerWidth - canvasOffsetX * 2; canvas.height = window.innerHeight - canvasOffsetY * 2; +reset.style.top = canvasOffsetY + "px"; +reset.style.left = canvas.width - canvasOffsetX + "px"; + let isPainting = false; -let lineWidth = 5; -let strokeColor = "skyblue" +let lineWidth = 2; +let strokeColor = "red" let drawings = []; ctx.lineWidth = lineWidth; -ctx.lineCap = 'round'; +ctx.lineCap = 'square'; ctx.strokeStyle = strokeColor; const draw = (x, y) => { @@ -22,21 +25,30 @@ const draw = (x, y) => { return; } - ctx.lineWidth = lineWidth; - ctx.lineCap = 'round'; - ctx.lineTo(x - canvasOffsetX, y - canvasOffsetY); + // ctx.lineTo(x - canvasOffsetX, y - canvasOffsetY); drawings.push({x : (x - canvasOffsetX)/canvas.width, y : (y - canvasOffsetY)/canvas.height}); ctx.stroke(); ctx.beginPath(); } +const drawCross = (x, y) => { + ctx.moveTo(x - 5, y - 5); + ctx.lineTo(x + 5, y + 5); + ctx.moveTo(x + 5, y - 5); + ctx.lineTo(x - 5, y + 5); + ctx.stroke(); + ctx.beginPath(); + setTimeout( ()=>{ + ctx.fillStyle = "aliceblue"; + ctx.fillRect(x - 7, y - 7, 14, 14); + }, 1 * 1000); +} + canvas.addEventListener('mousedown', (e) => { isPainting = true; - hit.style.display = ""; - setTimeout(() => { - hit.style.display = "none" - }, 2 * 1000); + + drawCross(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY); }); /* canvas.addEventListener('mouseup', (e) => { diff --git a/style.css b/style.css index 1244c27..06b066c 100644 --- a/style.css +++ b/style.css @@ -20,4 +20,8 @@ canvas { #check { position: absolute; display: none; +} + +#reset { + position: absolute; } \ No newline at end of file -- cgit v1.2.3