Tuto Canvas : Images

<canvas> accepte le chargement d'images dans sa surface de dessin. Cette fonction est vraiment très puissante, elle permet d'afficher une image à certaines coordonnées. Pour ceci, on initialise une nouvelle image grâce au constructeur new Image().
Sa forme la plus basique ne comporte que trois paramètres: l'objet "Image" et  les coordonnées x et y:

var image = new Image();
image.src = "source.extension";
context.drawImage(image, x, y);

La méthode drawImage(image,x,y) copie l'image image chargée sur la surface de dessin, aux coordonnées (x,y). Il est possible de se resservir de la même ressource image une infinité de fois.

 

Exemple d'utilisation:

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

var image = new Image();
image.src = 'like.png';
image.onload = function() {
    context.drawImage(image,50,50);
};

Résultat:

Aussi, nous pouvons aussi créer des motifs qui seront répétés horizontalement, verticalement. Pour ceci, on utilise la méthode createPattern(image, répétition) exploite une image, chargée comme indiqué précédemment, et lui confère un mode de répétition, parmi: repeat-y, repeat-x, ou repeat.

 

Exemple d'utilisation:

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

var image = new Image();
image.src = 'like.png';
image.onload = function(){
    var motif = context.createPattern( image, 'repeat-x' );
    context.fillStyle = motif;
    context.fillRect(0,0,250,250);
};

Résultat:

8.6.13 - 0

Tuto Canvas : Degradé

Les deux principaux types de dégradés sont :

• Linéaire (createLinearGradient) le long d'un axe.
• Radial (createRadialGradient) avec un centre et une extension circulaire.

Pour affecter un dégradé, il faut définir quelles sont les couleurs et points de début et d’arrêt.

• Linéaire:

Pour créer un dégradé linéaire, la fonction utilisée est :

createLinearGradient(x1, y1, x2, y2)

x1, y1 : Le point de départ.
x2, y2 : Le point d'arrivé.

Pour définir une couleur on utilise la fonction addColorStop(p,couleur), où p la position de la couleur dans le dégradé, entre 0 (couleur de départ) et 1 (couleur de fin).
Enfin on assigne la propriété fillStyle pour appliquer le dégradé.

 

Exemple d'utilisation:

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

// Délimitation du début et de la fin du dégradé
var gradient = context.createLinearGradient(0,0,300,100);

// Ajout d'une première couleur
gradient.addColorStop(0,"red");     

// Ajout d'une deuxième couleur
gradient.addColorStop(1,"green");    

// Affectation du dégradé
context.fillStyle = gradient;            

// On trace un rectangle plein qui aura pour style le dégradé
context.fillRect(0,0,300,300); 

Résultat:

• Radial:

Pour créer un dégradé radial la fonction utilisée est :

createRadialGradient(x1, y1, r1, x2, y2, r2)

 

Exemple d'utilisation:

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

var gradient = context.createRadialGradient(0,0,50,0,150,300);
gradient.addColorStop(0,"red");
gradient.addColorStop(0.5,"green");
gradient.addColorStop(0.9,"blue");
context.fillStyle = gradient;
context.fillRect(0,0,300,300);

Résultat:

 

3.6.13 - 0

Tuto Canvas : Textes

Dessiner du texte sur canvas HTML5 est très simple. Pour cela, il existe deux méthodes :

• fillText('montext', x, y) produira des lettres.
• strokeText('montext', x, y) produira uniquement le contour des lettres.

Pour appliquer des styles (le font, alignement, …) sur le texte, plusieurs propriétés sont présentes :

• font : police.
• textAlign : alignement.
• Etc.

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");
    
var text = 'Developpeur';      // déclarer texte
context.font = "30pt Arial";   // définir la taille et le font
context.fillStyle = "red";     // couleur du texte
context.fillText(text,25,150); // 25:Coordonnée sur l'abscisse
                               // 150:Coordonnée sur l'ordonnée

Résultat:

30.5.13 - 0

Tuto Canvas : Les Formes

• 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:

• 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 Précédent :
Présentation Canvas.
Les lignes Canvas.

27.5.13 - 0

Tuto Canvas : Chemins et Tracés

Une fois la hauteur, la largeur et l’attribut  "id" sont définies et tester si notre canvas et notre context sont existes :

 <!doctype html>
 <html>
 <head>
     <title>Test Canvas</title>
 </head>
 <script>
 window.onload = function()
 {
     var canvas = document.getElementById("mon_canvas");
     var context = canvas.getContext("2d");
     if(!canvas)
     {
         alert("Impossible de récupérer le canvas");
         return;
     }
     if(!context)
     {
         alert("Impossible de récupérer le context");
         return;
     }
      // Suite...
 }
 </script>
 <body>

     <canvas id="mon_canvas" width="300" height="300">

     </canvas>

 </body>
 </html>

Les premières fonctions pour commencer sont celles qui vont tracer des chemins. Un tracé peut se dérouler en plusieurs étapes: initialisation de chemin, définir leur point de départ puis point d'arrivée, affichage du contour ou du remplissage.

Un tracé est initialisé par la méthode beginPath(). Le point de référence de début du tracé est désigné avec moveTo(x,y). Il s'agit de décider à partir de quel emplacement le tracé va être déplacé. Puis vient le tracé de la ligne elle-même avec la méthode lineTo(x,y) qui va ajouter un segment au chemin qui fut débuté par beginPath(). On peut ajouter autant de segments que l'on veut, puis éventuellement "fermer" la forme pour revenir automatiquement au point de départ avec closePath().

 context.beginPath();      // Début du chemin

 context.moveTo(100,100);   // Le tracé part du point 100,100

 context.lineTo(200,100);  // Un segment est ajouté vers 200,100

 context.lineTo(100,200);  // Un segment est ajouté vers 100,200

 context.closePath();      // Fermeture du chemin

Ce code ne charge rien à l'affichage. Mais, il apparait une fois appelée l'une des deux méthodes fill() pour remplir et stroke() pour le contour.
On ajoutant le code :

 context.stroke();

Il s'affiche:

Les coordonnées des points utilisés:

Pour définir les styles, des couleurs de contour et de remplissage dont dépendent fill() et stroke() , il faut utiliser des propriétés du contexte: fillStyle et strokeStyle.
Ajoutant ce code à notre exemple:

 context.fillStyle = "red";
 context.fill();

Il s'affiche:

En résume :

Méthode	Desc
beginPath()	Indique au context que l'on s'apprête à effectuer un nouveau tracé.
moveTo(x,y)	Par défaut, si l'on trace une ligne, elle commencera aux coord[0, 0]. Cette fonction déplace le point de départ de chaque ligne.
lineTo(x,y)	Pemet de tracer une ligne en partant de la position actuelle, jusqu'aux coordonnées x,y indiquées.
closePath()	Indique au context que l'on a terminé avec ce tracé.
fill()	Créer une forme pleine à partir des lignes tracées.
strocke()	Créer les traits des lignes.

22.5.13 - 0

Tuto Canvas : Présentation

L’élément <canvas> représente une zone de dessin pouvant dessiner au sein de la page web, à l'intérieur de la balise HTML <canvas>. On peut dessiner des formes (triangles, cercles...) aussi ajouter des images, appliquer des filtres graphiques et d’effets... en utilisant l'API qui met à disposition des méthodes accessibles en JavaScript.

Cela nous permet de réaliser des applications graphiques directement dans des pages web.
Autrement, il s’agit d’un espace de pixels pour réaliser des fonctions graphiques.

L’élément lui-même est très simple. Il suffit d’en spécifier les dimensions dans la balise d’ouverture :

<canvas id="mon-canvas" width="360" height="300">
</canvas>

Côté JavaScript, pour accéder à la surface de dessin de cet élément HTML. Deux fonctions sont appelées :

• getElementById(): Permet d'aller chercher l'élément <canvas> identifié par l’attribut id.

• getContext(): Spécifier dans quel contexte de dessin le script va agir (2D ou 3D).

<script type="text/javascript">
  var canvas = document.getElementById("mon_canvas");
  var contexte = canvas.getContext("2d");
  // Le reste du script ici...
</script>

20.5.13 - 0