Schnellstart: Zeichnen auf eine Canvas (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Das canvas-Element erzeugt eine rechteckige Bitmap-Zeichenfläche auf Ihrer Seite, auf der Sie mit JavaScript direkt zeichnen können. Die Canvas eignet sich hervorragend für die Entwicklung von Spielen oder für Situationen, in denen Sie Grafiken in Echtzeit erstellen oder in regelmäßigen Abständen ändern müssen.

Dieser Schnellstart enthält die folgenden Abschnitte:

• Voraussetzungen
• Das canvas-Element
• Renderkontext
• Zeichnen von Rechtecken
• Verwenden von Pfaden
• Zeichnen von Bögen
• Zeichnen von Kurven
• Die quadratische Kurve
• Die kubische Bezierkurve
• Nächste Schritte

Voraussetzungen

In diesem Thema wird davon ausgegangen, dass Sie mit JavaScript eine einfache Windows Store-App erstellen können, wobei die Vorlage der Windows-Bibliothek für JavaScript verwendet wird. Außerdem sollten Sie über ein Grundverständnis von HTML und JavaScript verfügen. Anweisungen zum Erstellen Ihrer ersten Windows Store-App mit JavaScript finden Sie unter Erstellen Ihrer ersten Web-App. Anweisungen zur Verwendung der Vorlage "WinJS" finden Sie unter "Herunterladen und Verwenden des WinJS-Toolkits".

Das canvas-Element

Das canvas-Element erzeugt eine rechteckige Bitmap-Zeichenfläche auf Ihrer Seite, auf der Sie mit JavaScript direkt rendern können.

Das canvas-Element besitzt Attribute für Breite und Höhe. Beide sind optional und können mit DOM-Eigenschaften (Dokumentobjektmodell) festgelegt werden. Wenn Sie die Attribute für Breite und Höhe nicht festlegen, wir die Canvas in ihrer Standardgröße von 300 Pixeln Breite und 150 Pixeln Höhe dargestellt.

<canvas id="canvas" width="150" height="150"></canvas>

Das id-Attribut gehört nicht zum canvas-Element, aber es kann zum Identifizieren des canvas-Elements im Skript verwendet werden.

Sie können die Größe der Canvas auch mit CSS (Cascading Style Sheets) festlegen. In der Voreinstellung rendert Ihre App das canvas-Element ohne Inhalt oder Rahmen – es ist vollständig transparent. Sie können es aber wie ein normales Bild formatieren, indem Sie Rand, Rahmen, Hintergrund usw. angeben. Die Formatierung hat keinen Einfluss auf die eigentliche Zeichnung auf der Canvas.

Renderkontext

Wenn Sie Ihrer App ein canvas-Element hinzufügen, erstellen Sie lediglich eine transparente Zeichenfläche. Für das Zeichnen auf der Canvas rufen Sie einen Renderkontext von der Canvas ab und zeichnen damit. Es gibt unterschiedliche Arten von Renderkontexten, die das Zeichnen auf verschiedene Weise unterstützen. Es gibt z. B. einen 2D-Kontext für 2D-Grafiken und einen 3D-Kontext für 3D-Grafiken. Die Beispiele in diesem Thema verwenden den 2D-Renderkontext.

Rufen Sie zum Abrufen des Renderkontexts die getContext-Methode der Canvas wie im folgenden Beispiel gezeigt ab:

var canvas = document.getElementById("quickstart");
var context = canvas.getContext("2d");

In unserem Beispiel haben wir zunächst mit der getElementById-Methode den DOM-Knoten der Canvas abgerufen und dann mit der getContext-Methode auf den Renderkontext zugegriffen. Die getContent-Methode übernimmt nur einen Parameter – den Kontexttyp. In unserem Beispiel ist dies "2d".

Nachdem Sie einen Renderkontext abgerufen haben, können Sie ihn zum Zeichnen verwenden. In den folgenden Abschnitten wird das Zeichnen unterschiedlicher Formen beschrieben.

Zeichnen von Rechtecken

Sie können zwei Funktionen für das Zeichnen von Rechtecken auf einer Canvas verwenden:

• fillRect

  fillRect (x, y, width, height)

  Die Methode zeichnet ein gefülltes Rechteck.

  Der x-Parameter und der y-Parameter sind Koordinaten, mit denen das Rechteck auf der Canvas platziert wird. Sie beziehen sich auf die obere linke Ecke der Canvas. Breite und Höhe werden in Pixeln angegeben.

• strokeRect

  strokeRect(x, y, width, height)

  Die strokeRect-Parameter sind identisch mit denen für das fillRect. Der Unterschied besteht darin, dass strokeRect nur die Umrandung des Rechtecks zeichnet.

Diese Methode zeichnet die angegebene Form:

• fillStyle

  fillStyle = color

  Die fillStyle-Methode verwendet nur einen Parameter für das Ausfüllen einer Form mit einer Farbe. Die Farbe kann mit RGB, einer vordefinierten Farbe wie "red", "blue" usw., einer hexadezimalen Farbe oder sogar einem Farbverlauf angegeben werden. fillStyle-Beispiele finden Sie im Beispiel für das Zeichnen eines Rechtecks weiter unten.

Diese Methode leert den angegebenen Bereich und macht ihn vollständig transparent:

• clearRect

  clearRect(x, y, width, height)

  Wie bei der fillRect-Methode und der strokeRect-Methode dienen die clearRect-Parameter "x" und "y" der Angabe der Position des zu löschenden Rechtecks und seiner Breite und Höhe.

Beispiel

Beginnen wir mit einem Beispiel, das eine Canvas erstellt und zwei ausgefüllte Quadrate zeichnet – ein goldenes Quadrat und ein transparentes violettes Quadrat. Für das Erstellen des schwarzen Randes um die Canvas wird CSS verwendet:

Das Beispiel beginnt mit dem Deklarieren eines canvas-Elements im <body> des HTML-Codes. Das canvas-Element wird das id-Attribut "canvas" zugeordnet. Das height-Attribut und das width-Attribut des Elements werden auf 100 Pixel festgelegt:

<body>
   <canvas id="canvas" width="100" height="100" />
</body>

Das canvas-Element wird mithilfe von CSS mit einem einen Pixel breiten schwarzen Rahmen versehen. Das CSS sollte in einer externen Datei enthalten sein, um das Laden der Dateien so effizient wie möglich zu machen:

/* style the canvas element with a black border. */
canvas { border: 1px solid black; }

Unser JavaScript-Code für das Zeichnen der beiden ausgefüllten Rechtecke auf der Canvas ist ebenfalls in einer externen Datei enthalten. Er beginnt nach dem Laden des HTML-Dokuments, indem der window.onload-Ereignishandler die draw-Funktion aufruft.

window.onload = draw;

Die draw-Methode ruft das canvas-Element mit der getElementById-Methode ab. Anschließend wird die getContext-Methode aufgerufen, um den Zeichnungskontext zu ermitteln. Sie müssen der getContext-Methode die Zeichenfolge "2d" übergeben.

Jede Canvas besitzt einen Zeichnungskontext. Im Zeichnungskontext werden alle Zeichnungsmethoden und -eigenschaften definiert.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D drawing context.
var context = canvas.getContext("2d");

Zum Zeichnen des ersten Quadrats wird fillStyle auf eine Farbe festgelegt. Es gibt verschiedene Möglichkeiten, ein Rechteck zu füllen. Wir verwenden in unserem Beispiel den RGB-Wert für Gold:

context.fillStyle = "rgb(255, 215, 0)";

Sie können fillStyle aber auch noch auf andere Arten festlegen.

• Sofern diese Möglichkeiten verfügbar sind, können Sie vordefinierte Farben wie "yellow", "orange" oder "purple" verwenden:

  context.fillStyle = "gold";

• Sie können auch die Hexadezimaldarstellung der Farbe in der Form #RRGGBB verwenden:

  context.fillStyle = "#FFD700";

  Diese Hexadezimalzahl stellt eine dunkle Goldfarbe dar.

• Auch wenn dies eigentlich keine Farbe ist, können Sie auch einen Farbverlauf als fillStyle verwenden:

  var myGradient=context.createLinearGradient(20, 20, 100, 0);
  
  myGradient.addColorStop(0,"goldenrod");
  myGradient.addColorStop(1,"white");
  
  context.fillStyle = myGradient;
  

  Dieses Beispiel erstellt einen linearen Farbverlauf, legt die Farbstopps fest und sorgt dafür, dass die Farbe im Rechteck von Rotgold nach Weiß verläuft.

  

• Der Standard-fillStyle ist Schwarz.

Im nächsten Schritt zeichnen wir mit der fillRect-Methode das eigentliche Rechteck. Die fillRect-Werte bilden den Ausgangspunkt für das Zeichnen eines gefüllten Rechtecks, indem sie die x- und y-Koordinaten für die linke obere Ecke des Rechtecks auf 15, 15 festlegen. Die x- und y-Koordinaten beziehen sich auf die obere linke Ecke der Canvas. Breite und Höhe des Rechtecks sind auf 55 bzw. 50 Pixel festgelegt:

context.fillRect (15, 15, 55, 50);

Beim zweiten Rechteck wird fillStyle auf den RGB-Wert für Violett festgelegt. Der vierte Wert (das "A" oder Alpha in RGBA) wird auf 0,5 festgelegt. Er bestimmt die Transparenz der Farbe. Die gültigen Alphawerte liegen zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig):

context.fillStyle = "rgba(0, 0, 200, 0.5)"

Die fillRect-Werte bilden den Ausgangspunkt für das Zeichnen, indem sie die x- und y-Koordinaten für die linke obere Ecke des Rechtecks auf 40, 40 festlegen. Breite und Höhe des Rechtecks sind auf 45 bzw. 40 Pixel festgelegt:

context.fillRect (40, 40, 45, 40);

Hier sehen Sie die vollständigen Codebeispiele:

Dies ist der JavaScript-Code. In unserem Beispiel trägt diese Datei den Namen "myJavascript.js":

window.onload = draw;   

// This function is called on page load.
function draw() {

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2d drawing context.
    var context = canvas.getContext("2d");

    // Set the color to the RGB equivalent of gold.
    context.fillStyle = "rgb(255, 215, 0)";

    // Draw the rectangle.
    context.fillRect (15, 15, 55, 50);

    // Set the color to the RGB equivalent of purple and
    // set the opacity of the rectangle to 50 percent.
    
    context.fillStyle = "rgba(0, 0, 200, 0.5)"

    // Draw the rectangle.
    context.fillRect (40, 40, 45, 40);
}

Dies ist die HTML-Datei.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js" defer="defer"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="100" height="100" />
    </body>
</html>

Verwenden von Pfaden

Die beginPath-Methode startet einen neuen Pfad und verwendet zusätzliche Methoden wie moveTo, lineTo oder arc zum Zeichnen einer Kombination aus Linien, Kurven und anderen Formen.

Nach dem Erstellen des Pfads können Sie die fillStyle-Methode oder strokeStyle-Methode zum Rendern des Pfads auf der Canvas verwenden.

Beispiel

Dieses Beispiel zeichnet ein braunes Dreieck:

Wir verwenden dieselben HTML- und CSS-Dateien wie für das erste Beispiel. In unserer JavaScript-Datei "myJavascript.js" verwenden wir dieselbe draw-Funktion und rufen sie auch hier wieder nach dem Laden der HTML auf.

Nach dem Abrufen des canvas-Elements und dem Angeben des 2D-Typs zeichnen wir das braune Dreieck durch Aufrufen der beginPath-Methode.

context.beginPath();

Intern werden Pfade als Listen von Unterpfaden (Linien, Bögen usw.) gespeichert, die zusammen eine Form ergeben. Bei jedem Aufruf der beginPath-Methode wird die Liste zurückgesetzt, und wir können neue Formen zeichnen.

Vor dem Zeichnen von Linien müssen Sie die moveTo-Funktion aufrufen. Die moveTo-Funktion zeichnet selbst nicht, sie platziert den Stift oder Pinsel nur an der Stelle, an der Sie mit dem Zeichnen des Dreiecks beginnen möchten.

context.moveTo(28, 20);

moveTo übernimmt zwei Argumente: die x- und y-Koordinaten. In diesem Fall haben wir die x-Koordinate auf 28 und die y-Koordinate auf 20 festgelegt. Die Koordinaten sind relativ zum Rand der Canvas, auf der Sie zeichnen.

Nun zeichnen wir die Linien des Dreiecks mit der lineTo-Funktion. Wie auch die moveTo-Funktion besitzt die lineTo-Funktion zwei Argumente: die x- und y-Koordinaten. Diese geben die Endpunkte der gezeichneten Linie an:

context.lineTo(78, 50); 
context.lineTo(28, 78); 
context.lineTo(28, 20); 

Wir haben in unserem Beispiel die fillStyle-Eigenschaft auf den Hexadezimalwert für Braun festgelegt. Wie bereits im Abschnitt zum Zeichnen von Rechtecken beschrieben, kann die fillStyle-Eigenschaft auf einen RGB-Wert, einen hexadezimalen Farbwert, eine vordefinierte Farbe oder einen Farbverlauf festgelegt werden.

context.fillStyle = "#996633";

Wir verwenden fillStyle zum Zeichnen des Dreiecks in einfachem Braun. Wir könnten auch die strokeStyle-Funktion verwenden, die nur die Umrandung der Form zeichnen würde.

Zeichnen Sie nun die Dreiecksform.

context.fill();

Dies ist der vollständige JavaScript-Code:

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2-D canvas type.
    var context = canvas.getContext("2d");
           
    // Add the brown triangle.
    context.beginPath();
    context.moveTo(28, 20);
    context.lineTo(78, 50); 
    context.lineTo(28, 78); 
    context.lineTo(28, 20); 
          
    // Set the color to the hexadecimal equivalent of brown.
    // Omit this step and the triangle will render 
    // the default color of black.
    context.fillStyle = "#996633";

    // Draw the triangle.
    context.fill();  

Zeichnen von Bögen

Für Bögen oder Kreise verwenden wir die arc-Methode:

context.arc(x, y, radius, startingAngle, endingAngle, antiClockwise);

Diese Methode übernimmt fünf Parameter:

• X und y sind die Koordinaten des Kreismittelpunktes.
• Der Radius ist der Abstand von der Mitte zu einem Punkt auf dem Kreis.
• Der startingAngle-Parameter und der endingAngle-Parameter definieren die Anfangs- und Endpunkte des Bogens im Bogenmaß gemessen von der x-Achse.
• Der anticlockwise-Parameter ist ein boolescher Wert, der bei true den Bogen gegen den Uhrzeigersinn zeichnet und ansonsten im Uhrzeigersinn.

Beispiel

Dieses Beispiel zeichnet einen blauen Kreis.

Nach dem Abrufen des canvas-Elements und dem Angeben des 2D-Typs zeichnen wir den blauen Kreis durch Aufrufen der beginPath-Methode.

context.beginPath();

In den vorherigen Beispielen mit Rechtecken und Dreieck haben wir zum Ausfüllen und Einfärben der Formen die fillStyle-Funktion verwendet. In diesem Beispiel legen wir die RGB-Farbe Blau fest und zeichnen mit strokeStyle nur den Umriss des Kreises.

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

Die arc-Funktion wird folgendermaßen definiert:

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

Dabei gilt:

• Die x- und y-Koordinaten legen die Kreismitte auf jeweils 50, 50 fest.
• Der Radius des Kreises wird auf 32 festgelegt.
• Anfang und Ende des Kreises sind bei 0 und Rad "2 * Math.PI", wodurch sich ein vollständiger Kreis ergibt.
• Der anticlockwise-Parameter wurde auf "true" festgelegt. Dies ist nicht wichtig, da wir einen vollständigen Kreis zeichnen; bei einem Bogen wäre dies jedoch außerordentlich wichtig.

Zuletzt zeichnen wir mit der stroke-Funktion den gerade definierten Kreis:

// draw the circle.
context.stroke();

So würde der Kreis aussehen, wenn wir nur die Hälfte des Bogens oder von Null bis Math.PI gezeichnet:

// Define the circle using an arc.
context.arc(50, 50, 32, 0, Math.PI, true);

Dies ist der JavaScript-Code. Auch dieser Code wäre wieder in einer draw-Funktion enthalten, die nach dem Laden der HTML-Seite aufgerufen wird. Im Abschnitt zum Zeichnen von Rechtecken finden Sie ein vollständiges Beispiel für die HTML- oder JavaScript-Dateien.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
          
// Start the path.
context.beginPath();

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

// draw the circle.
context.stroke();

Zeichnen von Kurven

Mithilfe von Kurven werden komplexe Formen gezeichnet. Es gibt zwei Arten von Kurven: die Bézier- oder kubische Kurve und die quadratic Kurve. Beide haben einen Anfangs- und Endpunkt auf der Canvas. Wie die Kurve jedoch gezeichnet wird, hängt vom Kontrollpunkt (oder den Kontrollpunkten) ab. Die quadratic Kurve besitzt einen Kontrollpunkt, während eine kubische Bézierkurve zwei Kontrollpunkte benötigt. Kurven sind immer in einem Pfad enthalten.

Die quadratische Kurve

Dies ist die quadraticCurveTo-Methode:

quadraticCurveTo(cp1x, cp1y, X, Y)

Die vier Parameter sind zwei Paare von x- und y-Koordinaten. "cp1x" und "cp1y" definieren die Position des Kontrollpunkts auf der Kurve, und das zweite Paar die Position des Kurvenendes.

Wie bei allen Formen beginnt auch das Zeichnen einer Kurve mit der moveTo(x, y)-Methode, die die x- und y-Koordinaten für den Kurvenanfang festlegt.

Es werden zwei imaginäre Tangenten werden von den Endpunkten zu den Kontrollpunkten gezeichnet. Die Kurve wird als Linie gezeichnet, die an den Tangenten entlang verläuft:

Beispiel

In diesem Beispiel wird einer Reihe von quadraticCurveTo-Methoden verwendet, um eine abstrakte Figur mit einer welligen Grundlinie zu zeichnen. Beachten Sie, dass die Kurven in der welligen Grundlinie immer kleiner werden, je näher die Kontrollpunkte an den Endpunkten der Kurve liegen.

Wir beginnen mit dem Abrufen des canvas-Elements und geben als Canvastyp 2D an. Anschließend erstellen wir den Pfad, indem wir die beginPath-Methode aufrufen.

context.beginPath();

Jetzt wird der Startpunkt für die erste Kurve auf die x- und y-Koordinaten 75 und 25 festgelegt.

context.moveTo(75, 25);

Jede quadratic Kurve wird folgendermaßen festgelegt:

context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

Für jeden Parameter gilt:

• cp1x
  Die x-Koordinate des Kontrollpunkts.

• cp1y
  Die y-Koordinate des Kontrollpunkts.

• x
  Die x-Koordinate am Endpunkt der Kurve.

• y
  Die y-Koordinate am Endpunkt der Kurve.

Beachten Sie, dass die Reihenfolge, mit der die Kurven gezeichnet werden, wichtig ist. Sie können eine oder zwei Kurven entfernen oder die Reihenfolge, mit der sie gezeichnet werden, ändern, um zu sehen, wie die Kurven gebildet werden.

Sie geben als Farbe Grün an, indem Sie fillStyle auf die RGB-Werte für Grün festlegen.

context.fillStyle = "rgb(100, 200, 50)";

Zuletzt wird die Form mit der fill-Funktion gefärbt:

context.fill();

Beachten Sie, dass die Canvas für dieses und das nächste Beispiel auf 150 x 150 Pixel vergrößert wurde:

<canvas id="canvas" width="150" height="150" />

Dies ist das vollständige Beispiel.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
         
// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75,25);

// Set each of the curves.        
context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

// Set the color of the image to green.
context.fillStyle = "rgb(100, 200, 50)";

// Draw the image.
context.fill();

Die kubische Bézierkurve

Dies ist die bezierCurveTo-Methode:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Die sechs Parameter sind drei Paare von x- und y-Koordinaten. "cp1x" und "cp1y" definieren die Position des ersten Kontrollpunkts auf der Kurve, "cp2x" und "cp2y" definieren die Position des zweiten Kontrollpunkts und das dritte Paar die Position des Kurvenendes.

Die Kurve beginnt an den x- und y-Koordinaten in der moveTo(x, y)-Methode.

Es werden imaginäre Tangenten von den Kontrollpunkten zu den Endpunkten gezeichnet. Die Kurve wird als Linie gezeichnet, die an den Tangenten entlang verläuft. Dies wird in der Abbildung durch die violetten Linien gezeigt:

Beispiel

In diesem Beispiel wird einer Reihe von bezierCurveTo-Methoden verwendet, um eine abstrakte Figur mit einer welligen Grundlinie zu zeichnen.

Nach dem Abrufen des canvas-Elements und dem Angeben des 2D-Typs erstellen wir den Pfad durch Aufrufen der beginPath-Methode.

context.beginPath();

Jetzt wird der Startpunkt für die erste Kurve auf die x- und y-Koordinaten 75 und 25 festgelegt.

context.moveTo(75, 25);

Jede der kubischen Bézierkurven wird folgendermaßen festgelegt:

context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

Für jeden Parameter gilt:

• cp1x
  Die x-Koordinate des ersten Bézier-Kontrollpunkts.

• cp1y
  Die y-Koordinate des ersten Bézier-Kontrollpunkts.

• cp2x
  Die x-Koordinate des zweiten Bézier-Kontrollpunkts.

• cp2y
  Die y-Koordinate des zweiten Bézier-Kontrollpunkts.

• x
  Die x-Koordinate am Endpunkt der Kurve.

• y
  Die y-Koordinate am Endpunkt der Kurve.

Beachten Sie, dass die Reihenfolge, mit der die Kurven gezeichnet werden, wichtig ist. Sie können eine oder zwei Kurven entfernen oder die Reihenfolge, mit der sie gezeichnet werden, ändern, um zu sehen, wie die Kurven gebildet werden.

Sie geben als Farbe Rot an, indem Sie fillStyle auf die RGB-Werte für Rot festlegen.

context.fillStyle = "rgb(200, 0, 0)";

Zuletzt wird die Form mit der fill-Funktion gefärbt:

context.fill();

Beachten Sie, dass die Canvas für dieses Beispiel auf 150 x 150 Pixel vergrößert wurde:

<canvas id="canvas" width="150" height="150" />

Dies ist das vollständige Beispiel:

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");

// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75, 25);
 
// Set each of the curves.
context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

// Set the color of the image to red.
context.fillStyle = "rgb(200, 0, 0)";

// Draw the image.
context.fill();

Nächste Schritte

Wir haben in dieser Schnellstartanleitung ein canvas-Element hinzugefügt, um eine transparente Zeichnungsfläche zu erstellen. Wir haben mit CSS einen Rahmen um die Canvas und mit JavaScript Grafiken auf der Canvas gezeichnet.

Wir haben einen 2D-Zeichnungskontext aus dem canvas-Element abgerufen, um fillRect und fillStyle für das Zeichnen von Rechtecken festzulegen. fillStyle haben wir auf verschiedene Weise festgelegt, um die Farbe der Grafiken mit RGB, Hexadezimalwerten, vordefinierten Farben oder einem Farbverlauf zu definieren.

Wir haben gesehen, wie die beginPath-Methode einen neuen Pfad startet und zusätzliche Methoden wie moveTo, lineTo oder arc verwendet, um eine Kombination aus Linien, Kreisen und Kurven zu zeichnen.

Nach dem Erstellen des Pfads haben wir mit der fillStyle-Methode und der strokeStyle-Methode den Pfad auf der Canvas gerendert.

Im nächsten Schritt erfahren Sie, wie Sie Grafiken auf der Canvas animieren und einen Farbverlauf erstellen.

So wird's gemacht: Animieren von Grafiken auf einer Canvas

So wird´s gemacht: Erstellen eines Farbverlaufs