HTML5 CANVASCanvas formes
Dessiner des formes dans des canvas HTML5
Canvas carré ou rectangle avec javascript
Pour dessiner en Javascript un canvas carré ou un canvas rectangle, on utilise les méthodes fillRect pour définir les coordonnées du rectangle et fillStyle pour lui donner de la couleur :Exemple :
<canvas id="monCanvas" width="200" height="100" style="border:1px dotted #0000ff;"></canvas>
<script type="text/javascript">
var c = document.getElementById(" monCanvas ");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000"; // couleur rouge
ctx.fillRect(0,0,150,75); // forme rectangle - fillRect(x, y, width, height)
</script>
<script type="text/javascript">
var c = document.getElementById(" monCanvas ");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000"; // couleur rouge
ctx.fillRect(0,0,150,75); // forme rectangle - fillRect(x, y, width, height)
</script>
La méthode fillRect attend 4 arguments :
- Les coordonnées du rectangle en x et y
- La hauteur et la largeur du rectangle
<canvas id="monCanvas" width="350" height="350" style="border:1px dotted #0000ff;"></canvas>
<script type="text/javascript">
var c = document.getElementById(" monCanvas ");
var ctx=c.getContext('2d');
// Fond
ctx.fillStyle = "olivedrab";
ctx.fillRect(50,50,250,250);
// Bouche
ctx.fillStyle = "pink";
ctx.fillRect(100,200,150,50);
// Yeux
ctx.fillStyle = "powderblue";
ctx.fillRect(100,100,50,50);
ctx.fillRect(200,100,50,50);
</script>
<script type="text/javascript">
var c = document.getElementById(" monCanvas ");
var ctx=c.getContext('2d');
// Fond
ctx.fillStyle = "olivedrab";
ctx.fillRect(50,50,250,250);
// Bouche
ctx.fillStyle = "pink";
ctx.fillRect(100,200,150,50);
// Yeux
ctx.fillStyle = "powderblue";
ctx.fillRect(100,100,50,50);
ctx.fillRect(200,100,50,50);
</script>
Canvas en arc de cercle avec javascript
Est utilisé ici, la méthode arc( x, y, radian, debutAngle, finAngle, sensAntiHoraire)Les angles sont définis en radians avec Math.PI (un tour complet de cercle = 2*Math.PI).
Exemple :
<canvas id="monCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c = document.getElementById(" monCanvas ");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.beginPath();
ctx.arc(150,150,100,0,Math.PI*2,true);
ctx.strokeStyle = "coral"; // couleur de contour
ctx.fillStyle = "bisque"; // couleur de remplissage
ctx.fill(); // appel de la méthode de remplissage
ctx.stroke(); // appel de la méthode de contour
</script>
<script type="text/javascript">
var c = document.getElementById(" monCanvas ");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.beginPath();
ctx.arc(150,150,100,0,Math.PI*2,true);
ctx.strokeStyle = "coral"; // couleur de contour
ctx.fillStyle = "bisque"; // couleur de remplissage
ctx.fill(); // appel de la méthode de remplissage
ctx.stroke(); // appel de la méthode de contour
</script>
Effets de transparence
Les couleurs de remplissage et de contour sont définies par fillStyle ou strokeStyle (pour la bordure). Si elles sont spécifiées via une valeur RGBA (A = Alpha), alors elles pourront utiliser un effet de transparence (ou opacité) :
<canvas id="monCanvas4" width="110" height="110"></canvas>
<script type="text/javascript">
var c4 = document.getElementById(" monCanvas4 ");
var ctx4=c4.getContext("2d");
ctx4.fillStyle = 'rgba(252, 194, 0, 0.5)';
ctx4.fill(); // appel de la méthode de remplissage
ctx4.fillRect(10,10,100,100);
</script>
<script type="text/javascript">
var c4 = document.getElementById(" monCanvas4 ");
var ctx4=c4.getContext("2d");
ctx4.fillStyle = 'rgba(252, 194, 0, 0.5)';
ctx4.fill(); // appel de la méthode de remplissage
ctx4.fillRect(10,10,100,100);
</script>
Pour aller plus loin...