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

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

WBOY

Libérer： 2016-05-16 15:52:01

original

1343 Les gens l'ont consulté

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

"zh">
"UTF-8">
裁剪区域
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

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 :
2016325102545351.png (275×198)