Implementieren der Radiergummifunktion mithilfe der Methode „clearRect()' in den HTML5 Canvas API_html5-Tutorial-Tipps

In der realen Welt verwenden wir Pinsel, um auf dem Zeichenbrett zu zeichnen. In der HTML5-Leinwand können wir auch den Pinsel der Leinwand verwenden – das CanvasRenderingContext2D-Objekt, um auf der Leinwand zu zeichnen. Wie wir alle wissen, werden unsere Pinsel in der Regel mit Radiergummis verwendet, um Fehler beim Malvorgang zu korrigieren und neu zu streichen. Im HTML5-Canvas stellt uns das CanvasRenderingContext2D-Objekt auch einen Radiergummi zur Verfügung, der für immer wiederverwendet werden kann – die Methode clearRect().

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. clearRect(x, y, width, height)

Die Methode „clearRect()“ des CanvasRenderingContext2D-Objekts wird verwendet, um alle Grafikpixel im rechteckigen Bereich der Leinwand mit dem angegebenen Koordinatenpunkt (x, y) als obere linke Ecke, der Breite als Breite und der angegebenen Höhe zu löschen als Höhe.

Schauen wir uns nun ein praktisches Beispiel an. Wir zeichnen zunächst einen vollen Kreis mit einem Radius von 50 Pixeln und löschen dann mit dem Radiergummi „clearRect()“ einen lokalen Bereich darin. Der ursprüngliche HTML5-Code zum Zeichnen eines Kreises lautet wie folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren

4. "UTF-8">
"myCanvas" width=
9. "400px" height="300px" style="border: 1px solid red;"> Ihr Browser unterstützt das Canvas-Tag nicht.
Der entsprechende Anzeigeeffekt ist wie folgt:
Jetzt verwenden wir die Methode clearRect(), um den rechteckigen Bereich des Vollkreises mit der Mitte (100,100) als Mittelpunkt und 10 Pixeln auf jeder Seite zu löschen.

JavaScript-Code
Inhalt in die Zwischenablage kopieren

2. Der entsprechende Anzeigeeffekt ist wie folgt (ist es ein bisschen wie eine Kupfermünze?).

Auf der Seite können wir einen Bereich auf der Seite löschen, um das Hintergrundbild anzuzeigen.
Im folgenden Beispiel löschen wir den Leerraum im Rechteck und lassen es den Seitenhintergrund anzeigen:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         
       

  

  

<script>   <li> <span> </span> </li>    window.onload = <li class="alt"> <span>Funktion</span><span class="keyword">(){   </span> <span> </span> </li>        <li> <span>var</span><span class="keyword"> canvas = document.getElementById(</span><span>"canvas"</span><span class="string">);   </span> <span> </span> </li>        canvas.width = 800;   <li class="alt"> <span> </span> </li>        canvas.height = 600;   <li> <span> </span> </li>        <li class="alt"> <span>var</span><span class="keyword"> context = canvas.getContext(</span><span>"2d"</span><span class="string">);   </span> <span> </span> </li>        context.fillStyle = <li> <span>"#FFF"</span><span class="string">;   </span> <span> </span> </li>        context.fillRect(0,0,800,600);   <li class="alt"> <span> </span> </li>  <li> <span> </span> </li>        <li class="alt"> <span>//清空画布 </span><span class="comment">  </span> <span> </span> </li>        context.clearRect(0,0,canvas.width,canvas.height);   <li> <span> </span> </li>  <li class="alt"> <span> </span> </li>    };   <li> <span> </span> </li></script>