Heim >Web-Frontend >HTML-Tutorial >So zeichnen Sie ein Verlaufsrechteck mit Leinwand in HTML5
So zeichnen Sie ein Verlaufsrechteck mit Leinwand in HTML5
- yuliaOriginal
- 2018-10-19 17:44:453224Durchsuche
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>Rendering:
<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 kannVerwenden 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:
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!