Initiation à l'API Canvas
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
<canvas id="mon_canvas" width="200" height="200" />
<script type="text/javascript">
var c = document.getElementById("mon_canvas");
var ctx = c.getContext('2d');
// On effectue ici toutes les opérations de dessin
</script>
Solution
1
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>
