Heim > Artikel > Web-Frontend > Beschneiden von Bereichsbildern mit der Methode „clip()“ in HTML5 Canvas API_html5-Tutorial-Tipps

Beschneiden von Bereichsbildern mit der Methode „clip()“ in HTML5 Canvas API_html5-Tutorial-Tipps

WBOYOriginal: 2016-05-16 15:52:011321Durchsuche

Wenn wir Canvas zum Zeichnen eines Bildes verwenden, möchten wir oft nur einen Teil des Bildes behalten. Um diese Idee zu verwirklichen, können wir die Bildzuschneidefunktion der Canvas-API verwenden.
Die Bildzuschneidefunktion der Canvas-API bedeutet, dass bei Verwendung eines Pfads innerhalb der Leinwand nur das Bild des im Pfad enthaltenen Bereichs gezeichnet wird und das Bild außerhalb des Pfads nicht gezeichnet wird. Dies ähnelt ein wenig den Ebenenmasken in Flash.

Verwenden Sie die Methode „clip()“ ohne Parameter des Grafikkontexts, um die Bildzuschneidefunktion von Canvas zu implementieren. Diese Methode verwendet einen Pfad, um einen Beschneidungsbereich für die Leinwand festzulegen. Daher muss zunächst der Pfad erstellt werden. Rufen Sie nach Abschluss der Erstellung die Methode „clip()“ auf, um den Zuschneidebereich festzulegen.
Es ist zu beachten, dass der Zuschnitt auf der Leinwand nicht wiederhergestellt werden kann, was bedeutet, dass die Leinwand beim Zuschneiden kleiner wird, um sicherzustellen, dass sie immer noch die ursprünglich definierte Größe hat Durch die Leinwand muss beim Zeichnen am Ende auf save () und wiederherstellen () geachtet werden. Vor dem Zeichnen wird die Leinwand zunächst zugeschnitten. Es muss kein Bild sein, der Pfad kann auch eingefügt werden~

Schauen wir uns zunächst eine einfache Demo an.

JavaScript-CodeInhalt in die Zwischenablage kopieren

"zh">
"UTF-8">
裁剪区域
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

Laufergebnis:
2016325102516578.jpg (850×500)

Mit einer Mischung aus den Methoden save() und restart() können wir den Zeichenbereich begrenzen. Zuerst können wir die Methode rect() verwenden, um einen Bereich zu umgeben, den wir zeichnen möchten, und dann die Methode clip() verwenden, um den Bereich zuzuschneiden.

Auf diese Weise wird unabhängig von den Vorgängen, die wir im Kontext ausführen, nur der begrenzte Teil angezeigt. Mit anderen Worten besteht die Funktion von clip() darin, den anzuzeigenden Bereich einzuschränken. Wenn wir den Bereich nicht mehr einschränken möchten, können wir mit der Methode „restore()“ herausspringen und den ursprünglichen Kontext weiter bearbeiten.
Sehen Sie sich diesen Zuschnitt noch einmal an:
2016325102545351.png (275×198)

JavaScript-CodeInhalt in die Zwischenablage kopieren

Funktion drawScreen() {
var x = canvas.width / 2
var y = canvas.height / 2
var Radius = 75;
var offset = 50;
context.save();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI,
); context.clip();
// Zeichnen Sie zuerst einen blauen Bogen. Der Teil, der über den Zuschnitt hinausgeht, wird nicht angezeigt
context.beginPath();
false
context.fillStyle = 'blue'
context.fill();
context.beginPath(); context.arc(x offset, y, radius, 0, 2 * Math.PI,
);
'gelb'; context.fill();
context.beginPath();
context.arc(x, y offset, radius, 0, 2 * Math.PI, false);
'red'
context.fill();
/*
* Die Methode „restore()“ kehrt zum ursprünglichen Zustand des Kontexts zurück, in diesem Fall zum Zustand vor „clip()“.
* Sie können die context.beginPath()-Methode entfernen und versuchen, was passiert.
*/
context.restore();
context.beginPath();
context.arc(x, y, rayon, 0, 2 * Math.PI, false
context.lineWidth = 10;
context.StrokeStyle = 'bleu'
contexte.AVC();
}

Je souligne encore une fois que la forme générale d'appel de la fonction de recadrage est

save();
clip();
restore();
sont appelés dans cet ordre.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der Methoden zum Erreichen der Textausrichtung in HTML5 Canvas_html5-Tutorial-FähigkeitenNächster Artikel：Zusammenfassung der Methoden zum Erreichen der Textausrichtung in HTML5 Canvas_html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen