So zeichnen Sie ein Verlaufsrechteck mit Leinwand in HTML5-HTML-Tutorial-php.cn

So zeichnen Sie ein Verlaufsrechteck mit Leinwand in HTML5

yulia

Freigeben： 2018-10-19 17:44:45

Original

3123 Leute haben es durchsucht

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.

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

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!