27 mai 2013

Tuto Canvas : Les Formes

27.5.13 - 0

  • Rectangle :
Pour tracer un rectangle en donnant sa hauteur, sa largeur et son point de départ pour les coordonnées (x,y),  la méthode à utiliser, ici, est fillRect(x, y, largeur, hauteur).
x : Coordonnées sur l'abscisse.
y : Coordonnées sur  l'ordonnée.
largeur : Largeur du rectangle, en pixels.
hauteur : Hauteur du rectangle, en pixels.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

context.fillStyle = "#00BCFF";   // couleur de fond
context.fillRect(100,100,100,100);

 

Résultat:

tuto canvas
  • Cercle :
Pour créer un cercle, deux méthodes existent : arcTo() et arc(). Le principe de cette dernière fonction définit les coordonnées centrales de l'arc, son rayon (en pixels), l'angle de début et de fin, et dans quel sens le pinceau va tourner.
arc( x, y, rayon, AngleDepart, AngleFin, AntiClockwise )
x : Coordonnées du centre du cercle, sur l'abscisse.
y : Coordonnées du centre du cercle, sur l'ordonnée.
rayon : Le rayon du cercle, en pixels.
AngleDepart : C'est l'angle à partir duquel on va commencer notre tracé, en radians.
AngleFin : C'est l'angle jusqu’auquel on va effectuer notre tracé, en radians.
AntiClockwise : Le sens de rotation est contraire aux aiguilles d'une montre lorsqu'il vaut true.

Les angles sont définis en radians avec Math.PI (un tour complet de cercle = Math.PI*2).

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

// Cercle
context.beginPath();
context.arc(150,150,100,0,Math.PI*2,true);
context.strokeStyle = "#FF00F4";
context.fillStyle = "#00BCFF";
context.fill();
context.stroke();

// smile
context.beginPath();
context.arc(150,200,30,0,Math.PI,false);
context.strokeStyle = "#FFFF00";
context.stroke();

Résultat:

tuto canvas
Tuto Précédent :
Présentation Canvas.
Les lignes Canvas.

Newsletter

Abonnez-vous à notre newsletter pour recevoir les nouveautés.

0 commentaires:

© 2014 Déveur. WP Theme-junkie converted by Bloggertheme9
Powered by Blogger.
back to top