11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

j'essaie de coder une application de coloriage et je ne sais pas pourquoi ce code ne fonctionne pas.
Voici le code:

"use strict";
document.addEventListener('DOMContentLoaded', function(event) {
//A.1. catch THE canvas element from the HTML document
let myCanvas = document.getElementById('easel');
//A.2. create a variable with the getContext 2d then we can draw on the canvas after
let ctx = myCanvas.getContext('2d');
//B.1 Define a variable to keep track of the mouse status
let mouseX, mouseY, mouseDown = false;
//By default, we are going to use the black paint -> need to add after an event which triggers the change of the color
let r = 26,
g = 15,
b = 152;
//A. create the drawing function to draw a dot (filled circle) at the specific location on the canvas
/*A.3.Draw a dot at a specific position: the canvas
Parameters are : myCanvas, the x position, the y position and the size of the dot*/
function drawADot(ctx, x, y, size) {
//A.4. select a fill style
ctx.fillStyle = "rgba(" + r + " , " + g + " , " + b + ")";
/*A.5. Draw a filled circle
The beginPath() method begins a path, or resets the current path.*/
ctx.beginPath();
//A.6.Draw a circle: Math.PI*2 for the radius context.arc(X,Y,radius,start,end); the x and coordinate of the event
ctx.arc(x, y, size, 0, Math.PI * 2);
//A.7.closePath() causes the point of the pen to move back to the start of the current sub-path. It tries to add a straight line (but does not actually draw it) from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
ctx.closePath();
//A.8.fill(): fills the current drawing (path).
ctx.fill();
}
//B.Define the mouse events

//B.4 invokes the function to get the current mouse position relative to the top left of the canvas
function get_mousePosition(e) {
//B.6 if there is no event
if (!e) {
let e = event;
} else if (e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
} else if (e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
}
//B.2 function to trigger when the mouse is down on the canvas
function draw_mouseDown() {
//the mouseDown variable is true so we can allow to draw in the canvas
mouseDown = true;
drawADot(ctx, mouseX, mouseY);
}
//B.3 function to trigger when the mouse is up on the canvas
function draw_mouseUp() {
//the mouseDown variable is false because we can stop the drawing on the canvas
mouseDown = false;
}
//B.4 function to trigger when the mouse is moving with a parameter e(e like event)
function draw_mouseMove(e) {
//B.4 Update the mouse coordinates when moved
get_mousePosition(e);
//B.5 Draw a pixel if the mouse button is currently being pressed
if (mouseDown === true) {
drawADot(ctx, mouseX, mouseY);
}
}
//B.7 attach our event handlers to the events themselves
myCanvas.addEventListener('mousedown', draw_mouseDown, false);
myCanvas.addEventListener('mouseup', draw_mouseUp, false);
window.addEventListener('mousedown', draw_mouseDown, false);

});
Bonjour,
Il y a beaucoup d'erreurs d'inattention dans votre code.

1) Quand vous appelez la fonction drawADot, vous ne spécifiez actuellement pas la taille du point (size). La valeur transmise est alors undefined, qui équivaut à 0, ce qui explique que votre disque ne soit pas visible.

2) Votre fonction draw_mouseMove n'est jamais appelée donc la fonction get_mousePosition non plus (il faudrait rajouter un écouteur d'évènement "mousemove" sur myCanvas).

3) Cela dépend de l'aspect de votre page, mais je pense que les données e.layerX et e.layerY sont insuffisantes pour déterminer les coordonnées du point : le système de coordonnées peut être différent...

Et pour finir une question : pourquoi ajouter un écouteur d'évènement "mousedown" à la fois sur myCanvas et window ? Personnellement, j'aurais placé seulement des écouteurs "mousedown" et "mousemove" sur myCanvas et un écouteur "mouseup" sur window.
Modifié par TrisTOON (20 Mar 2017 - 20:46)