- Rectangle :
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:
- Cercle :
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 Précédent :Présentation Canvas.
Les lignes Canvas.
0 commentaires: