HTML5 Canvas

Das canvas-Element wird verwendet, um Grafiken auf der Webseite zu zeichnen.

Was ist Canvas?

Das canvas-Element von HTML5 verwendet JavaScript, um Bilder auf der Webseite zu zeichnen.

Das Raster ist ein rechteckiger Bereich, den Sie jedes Pixel steuern können.

Canvas verfügt über verschiedene Zeichnungspfade, Rechtecke, Kreise, Zeichen und Methoden zum Hinzufügen von Bildern.

Erstellen Sie das Canvas-Element

Fügen Sie das Canvas-Element zur HTML5-Seite hinzu.

Legen Sie die ID, Breite und Höhe des Elements fest:

<canvas id="myCanvas" width="200" height="100"></canvas>

Durch JavaScript zeichnen

Das Canvas-Element hat selbst keine Zeichnungsfähigkeit. Alle Zeichnungsarbeiten müssen intern in JavaScript abgeschlossen werden:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript verwendet die ID, um das Canvas-Element zu finden:

var c=document.getElementById("myCanvas");

Dann wird der Context-Objekt erstellt:

var cxt=c.getContext("2d");

Das "getContext("2d")"-Objekt ist ein eingebautes HTML5-Objekt, das verschiedene Methoden zum Zeichnen von Pfaden, Rechtecken, Kreisen, Text und zum Hinzufügen von Bildern bietet.

Die folgenden zwei Zeilen Code zeichnen einen roten Rechteck:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

Die fillStyle-Methode färbt es rot, die fillRect-Methode legt die Form, Position und Größe fest.

Verstehen Sie die Koordinaten

Der obige fillRect-Method hat die Parameter (0,0,150,75).

Das bedeutet: Zeichnen Sie ein 150x75 Rechteck auf dem Canvas, beginnend im linken oberen Ecke (0,0).

Wie im folgenden Bild gezeigt, werden die X- und Y-Koordinaten des Canvas verwendet, um das Zeichnen im Canvas zu positionieren.

Canvas-Instanz: Verständnis der Koordinaten

Beispiel: Zeigen Sie die Koordinaten, indem Sie den Mauszeiger auf das Rechteck setzen

Mehr Canvas-Beispiele

Nachstehend finden Sie weitere Beispiele zum Zeichnen auf dem Canvas-Element:

Beispiel - Linie

Durch Bestimmen des Anfangs- und Endpunkts wird eine Linie gezeichnet:

Canvas-Instanz: Linien

JavaScript-Code:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

Canvas-Element:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Ihr Browser unterstützt das canvas-Element nicht.
</canvas>

Versuchen Sie es selbst

Beispiel - Kreis

Durch Festlegen der Abmessungen, Farben und Positionen wird ein Kreis gezeichnet:

Canvas-Instanz: Kreise

JavaScript-Code:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

Canvas-Element:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Ihr Browser unterstützt das canvas-Element nicht.
</canvas>

Versuchen Sie es selbst

Beispiel - Farbverlauf

Verwenden Sie die von Ihnen指定的颜色来绘制渐变背景：

Canvas-Instanz: Verläufe

JavaScript-Code:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

Canvas-Element:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Ihr Browser unterstützt das canvas-Element nicht.
</canvas>

Versuchen Sie es selbst

Beispiel - Bild

Ein Bild auf die Leinwand legen:

Canvas-Instanz: Bilder

JavaScript-Code:

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

Canvas-Element:

<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;">
Ihr Browser unterstützt das HTML5 canvas-Tag nicht.
</canvas>

Versuchen Sie es selbst

HTML Canvas Tutorial

Besuchen Sie unsere Seite, um mehr über das Zeichnen zu erfahren HTML Canvas Tutorial.

Verwandte Seiten

Referenzhandbuch:HTML 5 <canvas>-Tag

Referenzhandbuch:HTML DOM Canvas-Objekt