<canvas> Récupérer la position de la souris
Bonjour, je viens vers vous car j'essaie de faire un petit programme pour dessiner avec ma souris à l'intérieur de l'élément Canvas. (je suis étudiant débutant)
En gros je n'arrive pas à comprendre comment faire pour déplacer mon canvas via le css et garder l'élément fonctionnel.
comme l'exemple suivant j'ajoute une marge gauche via css et quand je dessine sur le Canvas rien ne se passe en revanche
les coordonnées pour me permettre de dessiner commence à partir du coin gauche de la fenêtre. Si quelqu'un pouvait me guider afin de progresser merci beaucoup et bon week end.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title> canvas </title>
</head>
<body>
<div id="moncanvas">
<canvas>
</canvas>
</div>
<script src="canvas.js">
</script>
</body>
</html> |
Code:
1
2
3
4
5
6
| canvas
{
margin-left: 500px;
border: 5px solid black;
background-color:silver;
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| var canvas = document.querySelector("canvas"); // on va chercher la l'élément canvas
// get canvas 2D context and set him correct size
var ctx = canvas.getContext('2d'); // on lui définit un context 2d
// last known position
//dernière position connue
//x coordonées horizontale
//y coordonées verticales
var pos = {x:0, y:0}; // dernière position connu en gros par défault indique en haut à gauche point de départ
console.log(pos);
//window.addEventListener('resize', resize); //redimension du canvas si besoin
document.addEventListener('mousemove', draw); // L'événement se produit lorsque le pointeur se déplace au-dessus d'un élément ou de ses enfants.
document.addEventListener('mousedown', setPosition); // declenche un évènement quand on appuie sur un bouton.
document.addEventListener('mouseenter', setPosition); // L'événement se produit lorsque le pointeur (pointer) est déplacé sur un élément.
//Fonction SetPosition
// nouvelle position de la souris quand le bouton est relâché
// new position from mouse event
function setPosition(e) {
pos.X = e.clientX; // clientX = Renvoie la coordonnée horizontale du pointeur de la souris par rapport à la fenêtre courante.
pos.y = e.clientY; // clientY = Renvoie la coordonnée verticale du pointeur de la souris par rapport à la fenêtre courante.
}
//--- function draw -----
function draw(e) {
// mouse left button must be pressed
if (e.buttons !== 1) return; // 1 = clicgauche de la souris si le btn 1 est actionné alors on retour la fonction draw
ctx.beginPath(); // begin // permet de définir un premier chemin du tracé
//console.log(ctx.beginPath);
ctx.lineWidth = 5; // taille de la largeur du trait de dessin
ctx.lineCap = 'round'; // forme de la fin du trait de dessin
ctx.strokeStyle = '#c0392b'; // couleur du trait de dessin
ctx.moveTo(pos.x, pos.y); // from // méthode CanvasRenderingContext2D.moveTo() de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées (x, y).
setPosition(e);
ctx.lineTo(pos.x, pos.y); // to //La méthode CanvasRenderingContext2D.lineTo() de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées x, y spécifiées avec une ligne droite (sans tracer réellement le chemin).
ctx.stroke(); // draw it!
} |
