HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas clip() Methode

clip() ist ein Canvas 2Die Methode D API, den derzeit erstellten Pfad als aktuellen Auschnittspfad zu setzen.

Online-Beispiel

Schnipping vom Canvas200 * 120-Pixel-Rechteckbereich. Zeichnen Sie dann ein rotes Rechteck. Nur der rote Rechteckbereich liegt im Auschnittbereich:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Verwendung der HTML canvas clip() Methode-Grund教程(oldtoolbag.com)</<title>
</<head>
<body>
<span>clip(): wurde nicht durchgeführt:</span>
<canvas id="myCanvas" width="300" height="150" style="border:1px fest #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//　Zeichnen Sie ein Rechteck
ctx.rect(50,20,200,120);
ctx.stroke();
//　Zeichnen Sie ein rotes Rechteck
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
<span>clip(): wurde durchgeführt:</span>
<canvas id="myCanvas2" width="300" height="150" style="border:1px fest #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
//Schneiden Sie ein Rechteckbereich ab
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//Draw a rectangle after clipping
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
</body>
</html>

Test and See ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support clip() Methods.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The clip() method cuts out any shape and size of an area from the original canvas.

Hint:After clipping an area, all subsequent graphics will be confined to the clipped area (other areas on the canvas cannot be accessed). However, you can use the save() method before using the clip() method to save the current canvas area and restore it at any later time (using the restore() method).

JavaScript Syntax:	context.clip();

HTML canvas Reference Manual

HTML: <template> Tag