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);
});
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);
});