Canvas, trouver une valeur "blank" pour une vérification.

**Nicolas Legrand** · 22/12/2019, 11h57

Bonjour la communauté,

J'ai actuellement fait un code permettant de dessiner avec la souris
à l'intérieur de l'élément canvas qui contient deux boutons (1.effacer) (2.valider) .
Pour nettoyer le canvas c'est ok mais là ou je bloque c'est pour effectuer la condition
suivante :

Si le canvas est vide et que l'on clique sur le btn
valider alors alert "veuillez dessiner"
Sinon "alert "bravo"

Mon soucis est que je n'arrive pas à trouver l'élément à utiliser pour indiquer que
mon canvas ne contient aucun tracé ou est vide. Si vous avez des pistes merci d'avance ^^

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
 
		<head>
			<meta charset="UTF-8">
			<link rel="stylesheet" href="style.css">
      <title> CANVAS </title>
		</head>
 
        <body>
 
     <!-- ------------- CANVAS -------------------->
 
               <div id="canvas_container">
 
                       <canvas id="canvas"> 
                       </canvas>
 
                       <div id="canvasbtn">
                           <button id="nettoyer">Effacer</button>
                           <button id="valid">Valider</button>
                       </div>
                </div>
 
 
                           <script src="canvas.js"></script>
 
        </body>
 
</html>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
button
{
color: white;
background-color: black;
margin-left: 10px;
height:40px;
width:80px;
border-radius: 10px 10px 10px 10px;
}
 
 
 
/* --------------------------------------- CANVAS --------------------------------------------------*/
 
#canvas_container
{
margin-left: 100px;
}
 
canvas
{
margin-top:15px;
border: 2px solid black;
background-color: white;
}
 
 
 
#canvasbtn
{
margin-left: 20px;
}
/*----------------------- BTN ANNUALTION + TIMER + INFOS RESERVATION CLIENT -----*/
#cancel
{
width: 300px;
margin-bottom: 50px;
margin-left: 200px;
}

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
var canvas = document.querySelector("canvas");
var cleanCanvas = document.getElementById("nettoyer");
canvas.width = 500;
canvas.height = 500;
const ctx = canvas.getContext('2d');
 
 
 
let painting = false;
 
 
// Function (start position, finished position, draw, clear )
function startPosition(){
painting = true;  // mouse down active le painting
 }
 
// Quand le tracé se termine
function finishedPosition(){
 painting = false;
 ctx.beginPath();
}
 
 
// Pour dessiner 
function draw(e) {
	if (!painting) return;
	ctx.lineWidth = 3;
	ctx.lineCap = "round";
 
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
}
 
 
//pour effacer tous les tracés
function cleaning() {
ctx.clearRect(0, 0, 500, 500);
}
 
 
//EventListeners (Mouse event)
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup",finishedPosition);
canvas.addEventListener("mousemove", draw); 
canvas.addEventListener("mouseleave", finishedPosition)
cleanCanvas.onclick = function (){ // cleanCanvass btn pour effacer
cleaning()
}
 
/* condition, si le canvas ne contient pas de tracé et que l'on click sur le btn 
valider alors alert "veuillez dessiner"
Sinon "alert "bravo"*/
 
 
 
var validCanvas = document.getElementById("valid");
 
 validCanvas.addEventListener("click", function() {
		if (        ){
		 alert('veuillez dessiner');
		}
		else {
		 alert("bravo ");
		}                      
		    });

**mathieu** · 22/12/2019, 13h12

essayez avec une variable "vide = true" au chargement de la page.
et ensuite dans "startPosition" mettez "vide = false" et vous aurez une variable qui indique si la zone de dessin est vide.

**Nicolas Legrand** · 22/12/2019, 14h10

Merci ça fonctionne parfaitement en utilisant var vide = true.
du coup j'ai mis var vide = false dans la function startPosition() comme vous me l'avez indiqué.
Pour que cela s'effectue aussi quand j'effectue ma function cleaning()
j'ai rajouté vide = true aussi.

Merci encore et passez de bonnes fêtes !!!!! ^^

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
 
var canvas = document.querySelector("canvas");
var cleanCanvas = document.getElementById("nettoyer");
canvas.width = 500;
canvas.height = 500;
const ctx = canvas.getContext('2d');
var vide = true
 
 
 
let painting = false;
 
 
// Function (start position, finished position, draw, clear )
function startPosition(){
painting = true;  // mouse down active le painting
vide = false;
 }
 
// Quand le tracé se termine
function finishedPosition(){
 painting = false;
 ctx.beginPath();
}
 
 
// Pour dessiner 
function draw(e) {
	if (!painting) return;
	ctx.lineWidth = 3;
	ctx.lineCap = "round";
 
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
}
 
 
//pour effacer tous les tracés
function cleaning() {
ctx.clearRect(0, 0, 500, 500);
vide = true;
}
 
 
//EventListeners (Mouse event)
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup",finishedPosition);
canvas.addEventListener("mousemove", draw); 
canvas.addEventListener("mouseleave", finishedPosition)
cleanCanvas.onclick = function (){ // cleanCanvass btn pour effacer
cleaning()
}
 
 
 
var validCanvas = document.getElementById("valid");
 
 validCanvas.addEventListener("click", function() {
		if (vide === true){
		 alert('veuillez dessiner');
		}
		else {
		 alert("bravo");
		}                      
		    });

Canvas, trouver une valeur "blank" pour une vérification.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager