Heim >Web-Frontend >HTML-Tutorial >So zeichnen Sie ein Verlaufsrechteck mit Leinwand in HTML5

So zeichnen Sie ein Verlaufsrechteck mit Leinwand in HTML5

yulia
yuliaOriginal
2018-10-19 17:44:453161Durchsuche

Canvas ist eine neue Funktion in HTML5. Sie kann verschiedene coole Effekte im Browser zeichnen. Wissen Sie als Frontend-Entwickler, wie man Canvas zum Zeichnen von Grafiken verwendet? In diesem Artikel erfahren Sie, wie Sie mit Canvas ein Rechteck und ein Verlaufsrechteck zeichnen. Interessierte Freunde können sich darauf beziehen.

-Tag kann zum Zeichnen von Grafiken verwendet werden, der Effekt muss jedoch durch JavaScript-Skripte erzielt werden, da das -Tag nur ein Container für Grafiken ist und der Effekt mit dem erreicht werden muss Hilfe von JavaScript-Skripten. Mit Canvas können wir Linien, Kreise, Rechtecke, Zeichen usw. zeichnen.

Beispiel 1: Verwenden Sie Canvas, um ein rotes Rechteck zu zeichnen. Die spezifischen Schritte sind wie folgt:

Schritt 1: Verwenden Sie document.getElementById(), um das -Element zu finden

Zweiter Schritt: Verwenden Sie getContext("2d"), um ein Kontextobjekt zu erstellen

Schritt 3: Das fillStyle-Attribut kann die Farbe des Rechtecks ​​festlegen. In diesem Beispiel ist es auf „fillRect“ festgelegt Mit der Methode (x,y,width,height) kann ein gefülltes Rechteck gezeichnet werden das Rechteck, width stellt die Breite des Rechtecks ​​dar und height stellt die Höhe des Rechtecks ​​dar

Der vollständige Code lautet wie folgt:

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.fillStyle="#FF0000";
  ctx.fillRect(25,10,150,80);
</script>

Rendering:

So zeichnen Sie ein Verlaufsrechteck mit Leinwand in HTML5

Beispiel 2: Verwenden Sie Canvas, um ein Verlaufsrechteck zu zeichnen. Der Code lautet wie folgt:

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");  
  // Create gradient
  var grd=ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"orange");
  grd.addColorStop(1,"red");  
  // Fill with gradient
  ctx.fillStyle=grd;
  ctx.fillRect(25,10,150,80);
</script>

createLinearGradient(x,y, x1, y1) können lineare Verläufe erstellen muss zwei oder mehr Farben verwenden

addColorStop()-Methode, um den Farbstopp anzugeben, der 0 bis 1 sein kann

Verwenden Sie fillStyle Legen Sie die Farbe des Rechtecks ​​fest und verwenden Sie dann fillRect(x, y , Breite, Höhe) zum Zeichnen des Rechtecks ​​

Der Effekt ist wie in der Abbildung gezeigt:

So zeichnen Sie ein Verlaufsrechteck mit Leinwand in HTML5

Oben wird die Verwendung der Methode ausführlich beschrieben Das Zeichnen von Rechtecken und Verlaufsrechtecken auf Leinwand ist relativ einfach. Anfänger können es selbst ausprobieren, um zu sehen, ob sie besser aussehende Grafiken zeichnen können.

Weitere verwandte Tutorials finden Sie unter

Html5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie ein Verlaufsrechteck mit Leinwand in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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