Easy-Micro


LANGAGE HTML5 CANVAS
Canvas 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>



La méthode fillRect attend 4 arguments :
  • Les coordonnées du rectangle en x et y
  • La hauteur et la largeur du rectangle
Autre exemple (trouvé sur Alsacreations) :
<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>


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>


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>

HTML5 Pour aller plus loin...



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Lundi 25 mars 2019 - Semaine 13 - Saint Humbert (Demain: Sainte Larissa)
Aujourd'hui, c'est l'anniversaire de Marcia Cross (1962-57 ans), comédienne américaine (rôle de Bree Van de Kamp dans Desperate Housewives). Autre 25 mars: 1918 : décès à Paris du compositeur français Claude Debussy. 1984 : Alain Prost gagne le grand prix de Formule 1 du Brésil.
Haut de page Easy-Micro