interface WebTutoriel H5Exemple de code pour recadrer une image de zone à l'aide de la méthode clip() dans l'API HTML5 CanvasExemple de code pour recadrer une image de zone à l'aide de la méthode clip() dans l'API HTML5 Canvas
Cet article présente principalement un exemple de tutoriel d'utilisation de la méthode clip() dans HTML5 Canvas API pour recadrer une image de zone . Une attention particulière doit être accordée à la combinaison des méthodes save() et restaurer(). Les amis dans le besoin peuvent se référer à
Lorsque nous utilisons Canvas pour dessiner des images, nous souhaitons souvent ne conserver qu'une partie de l'image. C'est ainsi que nous pouvons utiliser la fonction de recadrage d'image fournie par l'API canevas pour concrétiser 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 qu'elle est découpée afin de garantir qu'elle puisse toujours être à la taille initialement définie. par le canevas à la fin Dessin nécessite une attention particulière à 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 également être inséré ~
Jetons d'abord un coup d'œil à une simple démo.
JavaScript Code复制内容到剪贴板
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>裁剪区域</title>
<style>
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<p id="canvas-warp">
<canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</p>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
//在屏幕上绘制一个大方块
context.fillStyle = "black";
context.fillRect(10,10,200,200);
context.save();
context.beginPath();
//裁剪画布从(0，0)点至(50，50)的正方形
context.rect(0,0,50,50);
context.clip();
//红色圆
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 5;
context.arc(100,100,100,0,Math.PI * 2,false);
//整圆
context.stroke();
context.closePath();
context.restore();
//再次裁切整个画布
context.beginPath();
context.rect(0,0,500,500);
context.clip();
//绘制一个没有裁切的蓝线
context.beginPath();
context.strokeStyle = "blue";
context.lineWidth = 5;
context.arc(100,100,50,0,Math.PI * 2,false);
//整圆
context.stroke();
context.closePath();
};
</script>
</body>
</html>
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 : 
JavaScript Code复制内容到剪贴板
function drawScreen() {
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var offset = 50;
//裁剪的区域为 (x, y)为中心半径为75的圆
context.save();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.clip();
// 先画一个蓝色的圆弧， 超过裁剪的部分不显示
context.beginPath();
context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
// 画一个黄色的圆弧， 超过裁剪的部分不显示
context.beginPath();
context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
// 画一个红色的圆弧， 超过裁剪的部分不显示
context.beginPath();
context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
/*
* restore()方法会返回到context原先的状态，在这里是clip()之前的状态。
* 大家可以移除context.beginPath()方法，试试会发生什么。
*/
context.restore();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = 'blue';
context.stroke();
}
Encore une fois, la forme générale d'appel de la fonction de recadrage est l'ordre de
save(); clip(); restore();
.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
H5: comment il améliore l'expérience utilisateur sur le WebApr 19, 2025 am 12:08 AMH5 améliore l'expérience utilisateur Web avec le support multimédia, le stockage hors ligne et l'optimisation des performances. 1) Support multimédia: H5 et les éléments simplifient le développement et améliorent l'expérience utilisateur. 2) Stockage hors ligne: WebStorage et indexDDB permettent une utilisation hors ligne pour améliorer l'expérience. 3) Optimisation des performances: les travailleurs Web et les éléments optimisent les performances pour réduire la consommation de bande passante.
Déconstruire le code H5: étiquettes, éléments et attributsApr 18, 2025 am 12:06 AMLe code HTML5 se compose d'étiquettes, d'éléments et d'attributs: 1. La balise définit le type de contenu et est entourée de supports d'angle, tels que. 2. Les éléments sont composés d'étiquettes de démarrage, de contenus et de balises d'extrémité, telles que le contenu. 3. Les attributs définissent les paires de valeurs clés dans la balise de démarrage, améliorent les fonctions, telles que. Ce sont les unités de base pour créer une structure Web.
Comprendre le code H5: les principes fondamentaux de HTML5Apr 17, 2025 am 12:08 AMHTML5 est une technologie clé pour créer des pages Web modernes, offrant de nombreux nouveaux éléments et fonctionnalités. 1. HTML5 introduit des éléments sémantiques tels que, etc., qui améliore la structure des pages Web et le référencement. 2. Prise en charge des éléments multimédias et des supports intégrés sans plug-ins. 3. Les formulaires améliorent les nouveaux types d'entrée et les propriétés de vérification, simplifiant le processus de vérification. 4. Offrez des fonctions de stockage hors ligne et locales pour améliorer les performances des pages Web et l'expérience utilisateur.
Code H5: meilleures pratiques pour les développeurs WebApr 16, 2025 am 12:14 AMLes meilleures pratiques pour le code H5 incluent: 1. Utilisez des déclarations de doctype correctes et l'encodage des caractères; 2. Utilisez des balises sémantiques; 3. Réduire les demandes HTTP; 4. Utiliser le chargement asynchrone; 5. Optimiser les images. Ces pratiques peuvent améliorer l'efficacité, la maintenabilité et l'expérience utilisateur des pages Web.
H5: L'évolution des normes et technologies WebApr 15, 2025 am 12:12 AMLes normes et technologies Web ont évolué à ce jour de HTML4, CSS2 et JavaScript simple et ont subi des développements importants. 1) HTML5 introduit des API telles que Canvas et WebStorage, ce qui améliore la complexité et l'interactivité des applications Web. 2) CSS3 ajoute des fonctions d'animation et de transition pour rendre la page plus efficace. 3) JavaScript améliore l'efficacité de développement et la lisibilité du code par la syntaxe moderne de Node.js et ES6, telles que les fonctions et classes Arrow. Ces changements ont favorisé le développement de l'optimisation des performances et les meilleures pratiques des applications Web.
H5 est-il un raccourci pour HTML5? Explorer les détailsApr 14, 2025 am 12:05 AMH5 n'est pas seulement l'abréviation de HTML5, il représente un écosystème de technologie de développement Web moderne plus large: 1. H5 comprend HTML5, CSS3, JavaScript et API et technologies connexes; 2. Il offre une expérience utilisateur plus riche, interactive et fluide et peut fonctionner de manière transparente sur plusieurs appareils; 3. À l'aide de la pile de technologie H5, vous pouvez créer des pages Web réactives et des fonctions interactives complexes.
H5 et HTML5: termes couramment utilisés dans le développement WebApr 13, 2025 am 12:01 AMH5 et HTML5 se réfèrent à la même chose, à savoir HTML5. HTML5 est la cinquième version de HTML, apportant de nouvelles fonctionnalités telles que les balises sémantiques, la prise en charge multimédia, la toile et les graphiques, le stockage hors ligne et le stockage local, l'amélioration de l'expressivité et de l'interactivité des pages Web.
À quoi se réfère H5? Explorer le contexteApr 12, 2025 am 12:03 AMH5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
Listes Sec
SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.
PhpStorm version Mac
Le dernier (2018.2.1) outil de développement intégré PHP professionnel
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
ZendStudio 13.5.1 Mac
Puissant environnement de développement intégré PHP
