Manuel de référence HTML

Tous les balises HTML

Méthode clip() de HTML canvas

clip() est une méthode de Canvas 2La méthode clip() de D API configure le chemin actuel créé en tant que chemin de coupe actuel.

Manuel de référence HTML canvas

Exemple en ligne

capture d'écran du canvas200 * 12une zone rectangulaire de 0 pixels. Ensuite, dessinez un rectangle rouge. Seulement la partie rouge du rectangle se trouve dans la zone de coupe :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilisation de la méthode clip() de HTML canvas-tutoriel de base (oldtoolbag.com)</<title>
</<head>
<body>
<span>clip() n'a pas été effectué :</span>
<canvas id="myCanvas" width="300" height="150" style="border:1px épaisseur #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　balise <canvas> .
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//　dessiner un rectangle
ctx.rect(50,20,200,120);
ctx.stroke();
//　dessiner un rectangle rouge
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
<span>clip() a été effectué :</span>
<canvas id="myCanvas2" width="300" height="150" style="border:1px épaisseur #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　balise <canvas> ./canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
//couper une zone rectangulaire
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//Dessiner un rectangle après la découpe
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
</body>
</html>

Vérifiez et voyez si ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9et Firefox, Opera, Chrome et Safari supportent clip() méthode.

Attention :Internet Explorer 8 Les versions précédentes de HTML ne supportent pas l'élément <canvas>.

Définition et utilisation

La méthode clip() découpe n'importe quelle forme et taille de zone à partir du canevas original.

Astuce :Après avoir découpé une zone, toutes les graphiques futurs seront limités à cette zone découpée (accès impossible aux autres zones du canevas). Cependant, vous pouvez utiliser la méthode save() avant d'utiliser clip() pour sauvegarder la zone actuelle du canevas et la restaurer à tout moment (en utilisant la méthode restore()).

Syntaxe JavaScript :	context.clip();

Manuel de référence HTML canvas

HTML: <template> balise