HTML5 Canvas
- Vorherige Seite HTML Input Formular Attribute
- Nächste Seite HTML5 SVG
Das Canvas-Element wird verwendet, um Grafiken auf der Webseite zu zeichnen.
Was ist Canvas?
Das HTML5 Canvas-Element zeichnet Bilder auf der Webseite mit JavaScript.
Das Canvas ist ein rechteckiger Bereich, den Sie jeden 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, und fillRect 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 einen 150x75 Rechteck, der von der linken oberen Ecke (0,0) beginnt.
Wie im folgenden Bild gezeigt, werden die X- und Y-Koordinaten des Canvas verwendet, um das Zeichnen im Canvas zu positionieren.
Beispiel: Wenn Sie den Mauszeiger über den Rechteckbereich bewegen, können Sie die Koordinaten sehen
Mehr Canvas-Beispiele
Nachstehend finden Sie weitere Beispiele zum Zeichnen auf dem Canvas-Element:
Beispiel - Linie
Durch Angabe des Anfangs- und Endpunkts wird eine Linie gezeichnet:
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>
Beispiel - Kreis
Durch Festlegen der Abmessungen, Farben und Positionen wird ein Kreis gezeichnet:
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>
Beispiel - Gradienten
Verwenden Sie die von Ihnen angegebene Farbe, um einen Gradientenhintergrund zu zeichnen:
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>
Beispiel - Bild
Ein Bild auf die Leinwand platzieren:
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>
HTML Canvas教程
Möchten Sie mehr über das Canvas lernen, besuchen Sie unsere HTML Canvas教程.
- Vorherige Seite HTML Input Formular Attribute
- Nächste Seite HTML5 SVG
