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

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

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

<script> </span> </li> <li class="alt"> <span> window.onload = </span><span class="keyword">function</span><span>(){ </span> </li> <li> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li> <li class="alt"> <span>canvas.width = 800; </span> </li> <li> <span>canvas.height = 600; </span> </li> <li class="alt"> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span> </span> </li> <li> <span> context.fillStyle = </span><span class="string">"#FFF"</span><span> </span> </li> <li class="alt"><span> context.fillRect(0,0,800,600); </span></li> <li> <span> </span> </li> <li class="alt"> <span>//Zeichne ein großes Quadrat auf dem Bildschirm </span><span class="comment"> </span> <span> </span> </li> context.fillStyle = <li> <span>"black"</span><span class="string">; </span><span> context.fillRect(10,10,200,200); </span> </li> context.save(); <li class="alt"> <span> </span> </li> context.beginPath(); <li> <span> </span> </li> <li class="alt"> <span> </span> </li> <li><span>//Schneiden Sie die Leinwand vom Punkt (0, 0) zum Quadrat von (50, 50) </span></li> <li class="alt"> <span> </span><span class="comment"> context.rect(0,0,50,50); </span> <span> </span> </li> context.clip(); <li> <span> </span> </li> <li class="alt"> <span> </span> </li> <li><span>//Roter Kreis </span></li> <li class="alt"> <span> </span><span class="comment"> context.beginPath(); </span> <span> </span> </li> context.StrokeStyle = <li><span>"red"</span></li>; <li class="alt"> <span> context.lineWidth = 5; </span> <span class="string"> </span><span> context.arc(100,100,100,0,Math.PI * 2,</span> </li>false<li> <span>); </span> </li> <li class="alt"> <span> </span><span class="keyword">//Voller Kreis </span><span> </span> </li> <li> <span> context.Stroke(); </span> <span class="comment"> </span><span> context.closePath(); </span> </li> <li class="alt"> <span> </span> </li> <li> <span> context.restore(); </span> </li> <li class="alt"> <span> </span> </li> <li><span> </span></li>//Schneiden Sie die gesamte Leinwand erneut aus <li class="alt"> <span> </span> </li> <li> <span> context.beginPath(); </span> <span class="comment"> </span><span> context.rect(0,0,500,500); </span> </li> context.clip(); <li class="alt"> <span> </span> </li> <li> <span> </span> </li> <li class="alt"><span>//Zeichne eine ungeschnittene blaue Linie </span></li> <li> <span> </span> </li> context.beginPath(); <li class="alt"> <span> </span><span class="comment"> context.StrokeStyle = </span><span>"blue"</span> </li>;<li> <span> context.lineWidth = 5; </span> </li> <li class="alt"> <span> context.arc(100,100,50,0,Math.PI * 2,</span><span class="keyword">false</span><span>); </span> </li> <li> <span> </span><span class="comment">//Voller Kreis </span><span> </span> </li> <li class="alt"> <span> context.Stroke(); </span> </li> <li> <span> context.closePath(); </span> </li> <li class="alt"> <span> }; </span> </li> <li> <span></script>

Laufergebnis:

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:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. Funktion drawScreen() {
2. var x = canvas.width / 2
3. var y = canvas.height / 2
4. var Radius = 75;
5. var offset = 50;
//Der zugeschnittene Bereich ist (x, y), ein Kreis mit einem Mittelpunktsradius von 75
7. context.save();
8. context.beginPath();
9. context.arc(x, y, radius, 0, 2 * Math.PI,
false
10. ); context.clip();
 
12. // Zeichnen Sie zuerst einen blauen Bogen. Der Teil, der über den Zuschnitt hinausgeht, wird nicht angezeigt
13. context.beginPath();
context.arc(x – Offset, y – Offset, Radius, 0, 2 * Math.PI,
14. false
);
15. context.fillStyle = 'blue'
;
16. context.fill();
17.  
//Zeichnen Sie einen gelben Bogen und der Teil, der über den Zuschnitt hinausgeht, wird nicht angezeigt
19. context.beginPath(); context.arc(x offset, y, radius, 0, 2 * Math.PI,
false
20. );
context.fillStyle =
21. 'gelb'; context.fill();
22.  
// Zeichnen Sie einen roten Bogen, und der Teil, der über den Zuschnitt hinausgeht, wird nicht angezeigt
24. context.beginPath();
25. context.arc(x, y offset, radius, 0, 2 * Math.PI, false);
context.fillStyle =
26. 'red'
;
27. context.fill();
28.  /*
29. * Die Methode „restore()“ kehrt zum ursprünglichen Zustand des Kontexts zurück, in diesem Fall zum Zustand vor „clip()“.
30. * Sie können die context.beginPath()-Methode entfernen und versuchen, was passiert.
31. */
32. context.restore();
33. context.beginPath();
34. context.arc(x, y, rayon, 0, 2 * Math.PI, false
);
35. context.lineWidth = 10;
36. context.StrokeStyle = 'bleu'
;
37. contexte.AVC();
38. }

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.