diff options
| author | Martial Simon <msimon_fr@hotmail.com> | 2024-03-05 15:46:20 +0200 |
|---|---|---|
| committer | Martial Simon <msimon_fr@hotmail.com> | 2024-03-05 15:46:20 +0200 |
| commit | 0429f8183d5ccc47a24a999b8784e5bdf23bea7e (patch) | |
| tree | 3760c8113e24659f433fddb3335b17d04cae0cb5 | |
| parent | e78b671a3062d285cfa932589760c5326ba486a2 (diff) | |
proto: drawCross fixed, still positioning the reset button
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | index.js | 34 | ||||
| -rw-r--r-- | style.css | 4 |
3 files changed, 29 insertions, 13 deletions
@@ -5,12 +5,12 @@ <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> - <p id="check"></p> <p id="instructions"> Click anywhere on the screen to move the robot! </p> + <button id="reset">Reset map</button> <canvas id="drawing-board"></canvas> <script src="./index.js"></script> </body> -</html>
\ No newline at end of file +</html> @@ -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) => { @@ -20,4 +20,8 @@ canvas { #check { position: absolute; display: none; +} + +#reset { + position: absolute; }
\ No newline at end of file |