diff options
| author | Yann C <yann.clarisse@epita.fr> | 2024-02-15 13:34:49 +0200 |
|---|---|---|
| committer | Yann C <yann.clarisse@epita.fr> | 2024-02-15 13:34:49 +0200 |
| commit | eb99c9a975712b50d97750a463119d20e8106d37 (patch) | |
| tree | ba05e150fb367a5ac3030d46fc2565ebec9962de | |
| parent | ad7f099f058b288cded2434ec06ebd23466c32c0 (diff) | |
| parent | d1aca3c6fc2945b568e87e86b6025c78dbf65bd3 (diff) | |
Merge branch 'main' of marcelus.net:mqtt
| -rw-r--r-- | index.html | 9 | ||||
| -rw-r--r-- | index.js | 13 | ||||
| -rw-r--r-- | principle.md (renamed from principe.md) | 0 | ||||
| -rw-r--r-- | style.css | 9 |
4 files changed, 22 insertions, 9 deletions
@@ -1,11 +1,16 @@ <!DOCTYPE html> <html> <head> - <title>MQTT</title> + <title>IoT Project</title> + <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> - <h1>MQTT Bonjour Yann</h1> + + <p style="position: absolute; left: 20px; border: 3px dashed orange; padding: 4px"> + Click anywhere on the screen to move the robot! + </p> <canvas id="drawing-board"></canvas> + <script src="./index.js"></script> </body> </html>
\ No newline at end of file @@ -4,16 +4,17 @@ const ctx = canvas.getContext('2d'); const canvasOffsetX = canvas.offsetLeft; const canvasOffsetY = canvas.offsetTop; -canvas.width = window.innerWidth - canvasOffsetX; -canvas.height = window.innerHeight - canvasOffsetY; +canvas.width = window.innerWidth - canvasOffsetX * 2; +canvas.height = window.innerHeight - canvasOffsetY * 2; let isPainting = false; let lineWidth = 5; let startX; -let StartY; -ctx.strokeStyle = "blue"; +let startY; +ctx.strokeStyle = "skyblue"; const draw = (e) => { + console.log(e); if (!isPainting) { return; } @@ -21,14 +22,12 @@ const draw = (e) => { ctx.lineWidth = lineWidth; ctx.lineCap = 'round'; - ctx.lineTo(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY); + ctx.lineTo(e.pageX - canvasOffsetX, e.pageY - canvasOffsetY); ctx.stroke(); } canvas.addEventListener('mousedown', (e) => { isPainting = true; - startX = e.clientX; - StartY = e.clientY; }); canvas.addEventListener('mouseup', (e) => { diff --git a/principe.md b/principle.md index 10bc915..10bc915 100644 --- a/principe.md +++ b/principle.md diff --git a/style.css b/style.css new file mode 100644 index 0000000..f10a42e --- /dev/null +++ b/style.css @@ -0,0 +1,9 @@ +body { + background: linear-gradient(60deg, skyblue, 70%, blue) no-repeat fixed; + background-size: cover; +} + +canvas { + background-color: aliceblue; + border-radius: 20px; +}
\ No newline at end of file |