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. nbsp;html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.     
7.         body { background: url("./images/bg3.jpg") repeat; }  
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
9.        
10.   
11.   
12. "canvas-warp">   
13.     "canvas">   
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.        

<script> </script>

window.onload = fonction(){

var canvas = document.getElementById("canvas"

);

toile.width = 800

toile.hauteur = 600

var context = canvas.getContext("2d"

);

context.fillStyle = "#FFF"

context.fillRect(0,0,800,600);

//Dessine un grand carré sur l'écran

context.fillStyle = "noir"

context.fillRect(10,10,200,200);

context.save();

context.beginPath();

//Découpez la toile du point (0, 0) jusqu'au carré de (50, 50)

context.rect(0,0,50,50);

contexte.clip();

//Cercle rouge

context.beginPath();

context.StrokeStyle = "rouge"

context.lineWidth = 5;

context.arc(100,100,100,0,Math.PI * 2,false

);

//Cercle complet

contexte.AVC();

context.closePath();

context.restore();

//Découpez à nouveau toute la toile

context.beginPath();

context.rect(0,0,500,500);

contexte.clip();

//Trace une ligne bleue non coupée

context.beginPath();

context.StrokeStyle = "bleu"

;

context.lineWidth = 5;

context.arc(100,100,50,0,Math.PI * 2,false

);

//Cercle complet

contexte.AVC();

context.closePath();

};