Recadrage d'images de zone à l'aide de la méthode clip() dans les conseils du didacticiel HTML5 Canvas API_html5

Lorsque nous utilisons Canvas pour dessiner une image, nous souhaitons souvent conserver seulement une partie de l'image. Nous pouvons utiliser la fonction de recadrage d'image de l'API Canvas pour réaliser cette idée.
La fonction de recadrage d'image de l'API Canvas signifie qu'en utilisant un chemin dans le canevas, seule l'image de la zone contenue dans le chemin sera dessinée, et l'image en dehors du chemin ne sera pas dessinée. C'est un peu comme les masques de calque dans Flash.

Utilisez la méthode clip() sans paramètres du contexte graphique pour implémenter la fonction de recadrage d'image de Canvas. Cette méthode utilise un chemin pour définir une zone de découpage pour le canevas. Le chemin doit donc être créé en premier. Une fois la création terminée, appelez la méthode clip() pour définir la zone de recadrage.
Il est à noter que le recadrage est effectué sur la toile. La toile recadrée ne peut pas être restaurée à sa taille d'origine, ce qui signifie que la toile devient plus petite au fur et à mesure de sa découpe afin de garantir qu'elle puisse toujours être à la taille initialement définie. par le canevas à la fin, le dessin doit faire attention à save() et restaurer(). La toile est d'abord découpée avant d'être dessinée. Il n'est pas nécessaire que ce soit une image, le chemin peut aussi être inscrit~

Jetons d’abord un coup d’œil à une démo simple.

Code JavaScriptCopier le contenu dans le presse-papiers

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

<script> </span> </li> <li class="alt"> <span> window.onload = </span><span class="keyword">fonction</span><span>(){ </span> </li> <li> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span> </span> </li>); <li class="alt"> <span> toile.width = 800 </span> </li> <li> <span> toile.hauteur = 600 </span> </li> <li class="alt"> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span> </span> </li>); <li> <span> context.fillStyle = </span><span class="string">"#FFF"</span><span> </span> </li> <li class="alt"> <span> context.fillRect(0,0,800,600); </span> </li> <li> <span> </span> </li> <li class="alt"> <span> </span><span class="comment">//Dessine un grand carré sur l'écran </span><span> </span> </li> <li> <span> context.fillStyle = </span><span class="string">"noir"</span><span> </span> </li> <li class="alt"> <span> context.fillRect(10,10,200,200); </span> </li> <li> <span> context.save(); </span> </li> <li class="alt"> <span> context.beginPath(); </span> </li> <li> <span> </span> </li> <li class="alt"> <span> </span><span class="comment">//Découpez la toile du point (0, 0) jusqu'au carré de (50, 50) </span><span> </span> </li> <li> <span>context.rect(0,0,50,50); </span> </li> <li class="alt"> <span> contexte.clip(); </span> </li> <li> <span> </span> </li> <li class="alt"> <span> </span><span class="comment">//Cercle rouge </span><span> </span> </li> <li> <span> context.beginPath(); </span> </li> <li class="alt"> <span> context.StrokeStyle = </span><span class="string">"rouge"</span><span> </span> </li> <li> <span> context.lineWidth = 5; </span> </li> <li class="alt"> <span>context.arc(100,100,100,0,Math.PI * 2,</span><span class="keyword">false</span><span> </span> </li>); <li> <span> </span><span class="comment">//Cercle complet </span><span> </span> </li> <li class="alt"> <span> contexte.AVC(); </span> </li> <li> <span> context.closePath(); </span> </li> <li class="alt"> <span> </span> </li> <li> <span> context.restore(); </span> </li> <li class="alt"> <span> </span> </li> <li> <span> </span><span class="comment">//Découpez à nouveau toute la toile </span><span> </span> </li> <li class="alt"> <span> context.beginPath(); </span> </li> <li> <span>context.rect(0,0,500,500); </span> </li> <li class="alt"> <span> contexte.clip(); </span> </li> <li> <span> </span> </li> <li class="alt"> <span> </span><span class="comment">//Trace une ligne bleue non coupée </span><span> </span> </li> <li> <span> context.beginPath(); </span> </li> <li class="alt"> <span> context.StrokeStyle = </span><span class="string">"bleu"</span><span> </span> </li>;<li> <span> context.lineWidth = 5; </span> </li> <li class="alt"> <span>context.arc(100,100,50,0,Math.PI * 2,</span><span class="keyword">false</span><span> </span> </li>); <li> <span> </span><span class="comment">//Cercle complet </span><span> </span> </li> <li class="alt"> <span> contexte.AVC(); </span> </li> <li> <span> context.closePath(); </span> </li> <li class="alt"> <span>}; </span> </li> <li> <span></script>

Résultat de l'exécution :

En utilisant un mélange de méthodes save() et restaurer(), nous pouvons limiter la zone de dessin. Tout d’abord, nous pouvons utiliser la méthode rect() pour entourer une zone que nous voulons dessiner, puis utiliser la méthode clip() pour recadrer la zone.

De cette façon, quelles que soient les opérations que nous effectuons dans le contexte, seule la partie limitée sera affichée. En d’autres termes, la fonction de clip() est de limiter la zone à afficher. Lorsque nous ne voulons plus limiter la zone, nous pouvons utiliser la méthode restaurer() pour sortir et continuer à exploiter le contexte d'origine.
Regardez à nouveau ce recadrage :

Code JavaScriptCopier le contenu dans le presse-papiers

1. fonction drawScreen() {
2. var x = toile.width / 2
3. var y = toile.hauteur / 2
4. var rayon = 75
5. var décalage = 50
7. //La zone recadrée est (x, y), qui est un cercle avec un rayon central de 75
8. context.save();
9. context.beginPath();
10. context.arc(x, y, rayon, 0, 2 * Math.PI, false
);
11. contexte.clip();
13.  // Dessinez d'abord un arc bleu, la partie qui dépasse le recadrage ne sera pas affichée
14. context.beginPath();
15. context.arc(x - décalage, y - décalage, rayon, 0, 2 * Math.PI, faux
);
16. context.fillStyle = 'bleu'
;
17. context.fill();
19.  //Dessinez un arc jaune, et la partie qui dépasse le recadrage ne sera pas affichée
20. context.beginPath();
21. context.arc(x offset, y, radius, 0, 2 * Math.PI, false
);
22. context.fillStyle = 'jaune'
;
23. context.fill();
25.  // Dessinez un arc rouge, et la partie qui dépasse le recadrage ne sera pas affichée
26. context.beginPath();
27. context.arc(x, y offset, radius, 0, 2 * Math.PI, false
);
28. context.fillStyle = 'rouge'
;
29. context.fill();
31.  /*
32. * La méthode restaurer() reviendra à l'état d'origine du contexte, dans ce cas l'état avant clip().
33. * Vous pouvez supprimer la méthode context.beginPath() et essayer ce qui se passe. 
34.          */  
35.         context.restore();   
36.         context.beginPath();   
37.         context.arc(x, y, radius, 0, 2 * Math.PI, false🎠>         context.lineWidth = 10;   
38.         context.strokeStyle = 
39. 'blue';    ;   
40.         context.stroke();   
41.     }  

   

再次強調，一般使用裁切功能的呼叫形式是

save();
clip();
restore();
這個順序來進行呼叫。