Exercice

Appliquer les fonctions de l'API Canvas. Soit un canvas de taille (200,200).

Dessiner un carré en partant du milieu du canvas de taille (50,50).

Question

Au lieu de dessiner un carré avec "ctx.rect(100,100,50,50)", dessiner un carré en utilisant les fonctions moveTo(x,y) et lineTo(x,y).

Indice

Rappel : code de base

1
<canvas id="mon_canvas" width="200" height="200" />
2
<script type="text/javascript">
3
var c = document.getElementById("mon_canvas");
4
var ctx = c.getContext('2d');
5
// On effectue ici toutes les opérations de dessin
6
</script>

Solution

1
<!DOCTYPE html>
2
<html>
3
<body>
4
5
<canvas id="mon_canvas" width="200" height="200"
6
style="border:1px solid #c3c3c3;">
7
Your browser does not support the canvas element.
8
</canvas>
9
10
<script>
11
var canvas = document.getElementById("mon_canvas");
12
var ctx = canvas.getContext("2d");
13
ctx.beginPath();
14
ctx.moveTo(100,100);
15
ctx.lineTo(150,100);
16
ctx.lineTo(150,150);
17
ctx.lineTo(100,150);
18
ctx.lineTo(100,100);
19
ctx.closePath();
20
ctx.lineWidth = 5;
21
ctx.stroke();
22
</script>
23
24
</body>
25
</html>
26
27
Question
Colorier le carré en rouge.
Indice
ctx.fillStyle
ctx.fill()
Solution
1
<script>
2
var canvas = document.getElementById("mon_canvas");
3
var ctx = canvas.getContext("2d");
4
ctx.beginPath();
5
ctx.moveTo(100,100);
6
ctx.lineTo(150,100);
7
ctx.lineTo(150,150);
8
ctx.lineTo(100,150);
9
ctx.lineTo(100,100);
10
ctx.closePath();
11
ctx.lineWidth = 5;
12
ctx.fillStyle = "#FF0000";
13
ctx.fill();
14
ctx.stroke();
15
</script>