Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Dans tous nos  précédents exemples, les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant, changer ce comportement en définissant la propriété globalCompositeOperation. En complément, la propriété clip nous permet de cacher les parties des formes que nous ne désirons pas.

globalCompositeOperation

Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode clearRect()) et davantage.

globalCompositeOperation = type
Cela configure le type d'opération de composition à appliquer lorsque l'on dessine de nouvelles formes, ou le type correspond à une string qui fait référence à une des douze opérations de composition possibles.

Reportez-vous aux exemples de compositon pour le code des exemples suivants.

 

Clipping paths

Un clipping path (chemin de découpe) est comme une forme de canvas standard à la différence qu'elle fonctionne comme un masque qui sert à caché certaines parties des formes du canvas. Cela est illustré dans l'image de droite. La forme rouge en étoile est un "cliping path". Tout ce qui est en dehors de the chemin de découpe ne sera pas dessiner dans le canvas.

Si nous comparons le "clipping path" à la propriété globalCompositeOperation vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec source-in et source-atop. La différence la plus significative entre les deux sont que les "clipping paths" ne sont jamais dessinés dans le canvas à proprement parlé et le "clipping path" n'est jamais affecté par l'ajout de nouvelles formes. Cela rend "clipping path" idéal pour dessiner plusieurs formes dnas une zone restreinte.

Dans le chapitre au sujet des "drawing shapes", je n'avais mentionné que les méthodes stroke() et fill() methods, mas il y en a une troisième appellée clip().

clip()
Transforme le chemin en cours de création en "clipping path" effectif.
Vous 

Il faut utiliser clip() plutot que closePath() pour fermer un chemin et enfaire un "clipping path"

Par défault, l'élément <canvas> possède un "clipping path" aux mêmes dimentions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparrente.

 

Un exemple de clip

Dans cet exemple, nous allons utiliser un chemin de découpe circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).

 

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.fillRect(0, 0, 150, 150);
  ctx.translate(75, 75);

  // Create a circular clipping path
  ctx.beginPath();
  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
  ctx.clip();

  // draw background
  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
  lingrad.addColorStop(0, '#232256');
  lingrad.addColorStop(1, '#143778');
  
  ctx.fillStyle = lingrad;
  ctx.fillRect(-75, -75, 150, 150);

  // draw stars
  for (var j = 1; j < 50; j++) {
    ctx.save();
    ctx.fillStyle = '#fff';
    ctx.translate(75 - Math.floor(Math.random() * 150),
                  75 - Math.floor(Math.random() * 150));
    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
    ctx.restore();
  }
  
}

function drawStar(ctx, r) {
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(r, 0);
  for (var i = 0; i < 9; i++) {
    ctx.rotate(Math.PI / 5);
    if (i % 2 === 0) {
      ctx.lineTo((r / 0.525731) * 0.200811, 0);
    } else {
      ctx.lineTo(r, 0);
    }
  }
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}

 

Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous translatons l'origine au centre de l'image. Ensuite, nous créons le "clipping path" circulaire en dessinant un arc (complet) et en faisant appelle à clip().  Les chemin de découpe font aussi partie de l'état de sauvegarde des canvas. Si nous souhaitons garder le chemin de découpe d'origine, nous pouvons sauvegarder l'état du canvas avant la création du nouveau "clipping path".

Tout ce qui sera dessiné après la création du chemin de découpe n'apparaitra qu'à l'intérieur de ce chemin. Vous pouvez voir cela clairement dans le dégradé linéaire qui est dessiné aprés. Suite à cela, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction drawStar() créee pour ce faire. Nous pouvons voir, une fois de plus que les éléments, ici les étoiles, n'apparaissent qu'à l'intérieur du chemin de découpe.

ScreenshotLive sample

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : Syberam
 Dernière mise à jour par : Syberam,