Optimisation d'un canvas

Version imprimable

1 pièce(s) jointe(s)

bonjour à tous
je souhaite afficher dans une page HTML l'état de 2 interrupteurs:
Pièce jointe 664503
Pour cela j'ai tenté ce qui suit:
HTML

Code:

1
2
3
4
5
6
7
8
9
10
    <div id="divCanvas1">
        <canvas class="inter" id="inter11"></canvas>
        <br>
        <canvas class="inter"id="inter12"></canvas>
    </div>
    <div id="divCanvas2">
        <canvas class="inter" id="inter21"></canvas>
        <br>
        <canvas class="inter" id="inter22"></canvas>
    </div>

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#divCanvas1{
  position: absolute;
  border: 1px solid blue;
  top: 200px;
  left: 650px;
}
#divCanvas2{
  position: absolute;
  border: 1px solid blue;
  top: 200px;
  left: 700px;
}
.inter{
  width: 25px;
  height: 25px;
  margin: 3px;
}
#inter11, #inter21{
  border: 1px solid red;
}
#inter12, #inter22{
  border: 1px solid green;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function chargeEtatInterBase(){
    const i11=document.getElementById("inter11");
    const i12=document.getElementById("inter12");
    const i21=document.getElementById("inter21");
    const i22=document.getElementById("inter22");
    const ctxI11=i11.getContext("2d");
    const ctxI12=i12.getContext("2d");
    const ctxI21=i21.getContext("2d");
    const ctxI22=i22.getContext("2d");
    ctxI11.fillStyle="red";
    ctxI11.fillRect(1,1,300,300);
    ctxI11.font= "100px Arial";
    ctxI11.fillText("ON",50,80);
    ctxI22.fillStyle="green";
    ctxI22.fillRect(1,1,300,300);
    ctxI22.font= "100px Arial";
    ctxI22.fillText("OF",50,80);
}

Je ne vois pas apparaître le texte "ON" "OF".
Je pense qu'il y a moyen d'améliorer la chose pour faire plus simple.
Si quelqu'un pouvait me filer un petit coup de main.
Merci.

Solution trouvée

Bonjour,
En relisant les infos sur le "canvas" je me suis rendu compte que je n'avais pas compris le fonctionnement. Je crois maintenant avoir cerné le sujet; alors si cela vous intéresse voici ma solution:
HTML

Code:

1
2
    <canvas id="inter1" width="35px" height="60px"></canvas>
    <canvas id="inter2" width="35px" height="60px"></canvas>

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
#inter1{
  position: absolute;
  border: 1px solid blue;
  top: 200px;
  left: 700px;
}
#inter2{
  position: absolute;
  border: 1px solid blue;
  top: 200px;
  left: 740px;
}

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
let alt=false;
const i1=document.getElementById("inter1");
const i2=document.getElementById("inter2");
const ctxI1=i1.getContext("2d");
const ctxI2=i2.getContext("2d");
function chargeEtatInterBase(){
    ctxI1.fillStyle="green";
    ctxI1.fillRect(5,30,25,25);
    ctxI2.fillStyle="green";
    ctxI2.fillRect(5,30,25,25);
    ctxI1.font = "12px Arial";    
    setInterval(actionInter,500);
}
function actionInter(){
    if(alt){
        ctxI1.clearRect(5,30,25,25);
        ctxI1.fillStyle="red";
        ctxI1.fillRect(5,5,25,25);
        ctxI1.fillStyle="black";
        ctxI1.fillText("ON",10,20);
        alt=false;
    }
    else{
        ctxI1.clearRect(5,5,25,25);
        ctxI1.fillStyle="green";
        ctxI1.fillRect(5,30,25,25);
        ctxI1.fillStyle="black";
        ctxI1.fillText("OF",10,47);
        alt=true;
    }
}

j'ai fait une petite animation pour montrer le fonctionnement.
Il y a surement moyen d'améliorer ce code. Mais cela fonctionne.
Merci à ceux aux lecteurs.

20/02/2025, 17h13
NoSmoking

Bonjour,

Citation:

Il y a surement moyen d'améliorer ce code.

Pourquoi passer par des éléments <canvas> quand cela se gère simplement en HTML-CSS avec plus de souplesse ?

Citation:

Mais cela fonctionne.

c'est ce qui compte avant tout !