Manuale di riferimento HTML

Completo della lista HTML

Metodo clip() di HTML canvas

clip() è il metodo dell'API Canvas 2D che imposta il percorso corrente come percorso di taglio.

Esempio online

Estrai un'area rettangolare di 200 * 120 pixel dallo schermo. Poi, disegna un rettangolo rosso. Solo la parte del rettangolo rosso si trova nell'area di taglio:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo clip() di HTML canvas - Guida di base (oldtoolbag.com)</title>
</head>
<body>
<span>clip() non attivato:</span>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag canvas HTML5.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Disegnare un rettangolo
ctx.rect(50,20,200,120);
ctx.stroke();
//Disegnare un rettangolo rosso
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
<span>clip() attivato:</span>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag canvas HTML5.</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
//Tagliare un'area rettangolare
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//Tagliare e disegnare un rettangolo
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
</body>
</html>

Prova a vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano clip(). metodi.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

Il metodo clip() ritaglia qualsiasi area di forma e dimensione dal tavolozza originale.

Suggerimento:Dopo aver ritagliato un'area, tutte le grafiche successive saranno limitate a quella regione (non potranno accedere alle altre aree del tavolozza). Tuttavia, puoi salvare l'area attuale della tavolozza utilizzando il metodo save() prima di utilizzare il metodo clip(), e ripristinarla in qualsiasi momento (utilizzando il metodo restore()).

Sintassi JavaScript:	context.clip();

Manuale di riferimento per HTML canvas

HTML: <template> etichetta