bonjour à tous
je souhaite afficher dans une page HTML l'état de 2 interrupteurs:
Pour cela j'ai tenté ce qui suit:
HTML
CSS
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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>
JS
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 #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; }
Je ne vois pas apparaître le texte "ON" "OF".
Code : 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 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 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.
Partager