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

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

WBOYoriginal: 2016-05-16 15:52:011368parcourir

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？！赶快换一个吧！！

Résultat de l'exécution :
2016325102516578.jpg (850×500)

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)

Code JavaScriptCopier le contenu dans le presse-papiers

fonction drawScreen() {
var x = toile.width / 2
var y = toile.hauteur / 2
var rayon = 75
var décalage = 50
//La zone recadrée est (x, y), qui est un cercle avec un rayon central de 75
context.save();
context.beginPath();
context.arc(x, y, rayon, 0, 2 * Math.PI, false
contexte.clip();
// Dessinez d'abord un arc bleu, la partie qui dépasse le recadrage ne sera pas affichée
context.beginPath();
context.arc(x - décalage, y - décalage, rayon, 0, 2 * Math.PI, faux
context.fillStyle = 'bleu'
context.fill();
//Dessinez un arc jaune, et la partie qui dépasse le recadrage ne sera pas affichée
context.beginPath();
context.arc(x offset, y, radius, 0, 2 * Math.PI, false
context.fillStyle = 'jaune'
context.fill();
// Dessinez un arc rouge, et la partie qui dépasse le recadrage ne sera pas affichée
context.beginPath();
context.arc(x, y offset, radius, 0, 2 * Math.PI, false
context.fillStyle = 'rouge'
context.fill();
/*
* La méthode restaurer() reviendra à l'état d'origine du contexte, dans ce cas l'état avant clip().
* Vous pouvez supprimer la méthode context.beginPath() et essayer ce qui se passe.
*/
context.restore();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false🎠> context.lineWidth = 10;
context.strokeStyle =
'blue'; ;
context.stroke();
}

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

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé des méthodes pour réaliser l'alignement du texte dans HTML5 Compétences du didacticiel Canvas_html5Article suivant：Résumé des méthodes pour réaliser l'alignement du texte dans HTML5 Compétences du didacticiel Canvas_html5

Articles Liés

Voir plus