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
|
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script>
function draw() {
// Initialisation du contexte pour le canavas 1
ctx = document.getElementById("canva1").getContext("2d");
// Résultat attendu
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 300, 150);
ctx.drawImage(image, 1200, 0, 400, 312, 0, 0, 300, 150)
// Initialisation du contexte pour le canavas 2
ctx = document.getElementById("canva2").getContext("2d");
// Résultat obtenu avec des valeur identiques à celles du canvas
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 200, 156);
ctx.drawImage(image, 1200, 0, 400, 312, 0, 0, 200, 156)
// Initialisation du contexte pour le canavas 3
ctx = document.getElementById("canva3").getContext("2d");
// Résultat obtenu en lisant les valeurs directement
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, document.getElementById("canva3").width, document.getElementById("canva1").height);
larg=document.getElementById("canva1").width;
haut=document.getElementById("canva1").height;
// Résultat obtenu en lisant les valeurs dans des variables
ctx.drawImage(image, 1200, 0, 400, 312, 0, 0, larg, haut)
// alert("Largeur : "+larg+" - Hauteur : "+haut);
}
</script>
<style type="text/css">
/* Dessiner une bordure aux canevas */
canvas {border: 1px solid black;}
/* Cacher l'image*/
#image {display: none;}
</style>
</head>
<body onload="draw();">
<image id="image" src="OnOffBdf.png"></image>
<canvas id="canva1" style="position: absolute; left: 28px; top: 40px; width: 200px; height: 156px;"></canvas>
<canvas id="canva2" style="position: absolute; left: 28px; top: 240px; width: 200px; height: 156px;"></canvas>
<canvas id="canva3" style="position: absolute; left: 28px; top: 440px; width: 200px; height: 156px;"></canvas>
</body>
</html> |
