So wird’s gemacht: Erstellen eines Farbverlaufs (HTML)

Artikel
03/04/2016

[ 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 ]

Formen und Linien sind nicht auf Volltonfarben begrenzt. Ein auf der Canvas verwendeter Farbverlauf ist tatsächlich eine Art von Farbwert und kann daher auf die Eigenschaften "fillStyle" und "strokeStyle" angewendet werden.

Farbverläufe können verwendet werden, um eine in eine Richtung verlaufende Änderung der Intensität oder Farbe eines Bilds zu erzeugen. Dies ist hilfreich, wenn Sie Hintergrundbilder erzeugen, Höhen auf Karten angeben oder an beliebigen anderen Stellen Aufhellungen und Schattierungen zu einer Oberfläche hinzufügen möchten.

Farbverläufe sind hilfreich beim Optimieren von Web-Apps, da Sie keine Bilder für diese Effekte verwenden müssen und die Bandbreite und den Zeitbedarf beim Laden minimieren können. Da sie programmgesteuert erzeugt werden, können sie leicht skaliert und wiederverwendet werden.

Voraussetzungen

In diesem Thema wird davon ausgegangen, dass Sie mit JavaScript eine einfache Windows Store-App erstellen können, für die die Vorlage der Windows-Bibliothek für JavaScript verwendet wird. 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.

Anweisungen

Schritt 1: Abrufen des Renderkontexts

Bevor wir ein Bild auf dem Canvas zeichnen und das Bild mit einem Farbverlauf versehen können, müssen wir den Renderkontext aus dem Canvaselement abrufen. Im Renderkontext werden alle Zeichenmethoden und Eigenschaften definiert.

Um die Leistung der Windows Store-App mit JavaScript zu verbessern, warten Sie, bis die HTML-Seite geladen ist, und führen Sie erst dann den JavaScript-Code aus. Platzieren Sie dazu den Code, der das Bild zeichnen soll, in einer Funktion, die nach dem Laden der Seite aufgerufen wird.
```
window.onload = drawGradient;   

function drawGradient() {...
```
Verwenden Sie "getElementById", um den Document Object Model (DOM)-Knoten der Canvas abzurufen, und greifen Sie dann mit der "getContext"-Methode auf den Renderkontext zu.

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.
```
    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
```

Schritt 2: Erstellen des Farbverlaufs

Wenn wir den Renderkontext haben, können wir den Farbverlauf definieren. Es gibt zwei Arten von Farbverläufen: linear (gerader Farbverlauf) oder radial (kreisförmiger Farbverlauf).

Linear gradient

Die Methode für den linearen Farbverlauf verwendet vier Argumente:

createLinearGradient(startX, startY, endX, endY)

Der erste Satz aus zwei Argumenten entspricht der x- und y-Position des Farbverlaufanfangs, und der zweite Argumentsatz entspricht der x- und y-Position des Farbverlaufendes.

Vertikaler linearer Farbverlauf

In diesem Beispiel wird die "createLinearGradient"-Methode der Variablen "myGradient" zugewiesen. Dies ist im nächsten Schritt hilfreich, wenn wir dem Farbverlauf Farben hinzufügen.
```
var myGradient=context.createLinearGradient(0, 0, 200, 0);
```
Um einen vertikalen linearen Farbverlauf zu erstellen, bei dem die Schattierungen des Farbverlaufs von einer Seite zur anderen verlaufen, sind die x- und y-Anfangspositionen des Farbverlaufs auf "0" und "0" festgelegt. Die x- und y-Endpositionen dagegen sind auf "200" und "0" festgelegt. Da die y-Werte (zweiter und vierter Parameter) beide auf "0" festgelegt sind, verläuft die Schattierung des Farbverlaufs gleichmäßig von links nach rechts.
Horizontaler Farbverlauf

Um einen Farbverlauf zu erstellen, dessen Schattierung von oben nach unten verläuft, lassen Sie die x-Werte (erster und dritter Parameter) konstant, und legen Sie für die y-Werte (zweiter und vierter Parameter) einen Bereich von "0" bis zur Höhe der Canvas fest.
```
var myGradient=context.createLinearGradient(0, 0, 0, 100);
```
Diagonaler Farbverlauf

Sie können Farbverläufe auch auf einer Diagonalen erstellen. In diesem Beispiel sind die x- und y-Werte auf "200" bzw. "100" festgelegt.
```
var myGradient=context.createLinearGradient(0, 0, 200, 100);
```

Radial gradient

Die "createRadialGradient"-Methode verwendet sechs Argumente:

createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

Die Parameter lauten wie folgt:

"startX" und "startY" sind die x- und y-Koordinaten der Canvas für den Anfangskreis.
"startRadius" ist der Radius des Anfangskreises.
"endX" und "endY" sind die x- und y-Koordinaten der Canvas für den Endkreis.
"endRadius" ist der Radius des Endkreises.

Herkömmlicher radialer Farbverlauf

Um einen "traditionellen" radialen Farbverlauf zu erstellen, bei dem die Farbe von einem Kreis zum anderen gleichmäßig schwächer wird, müssen Sie die xy-Koordinaten beider Kreise auf den gleichen Wert festlegen und sicherstellen, dass einer der Farbverlaufskreise größer ist als der andere.
```
var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);
```
Unterschiedliche Anfangs- und Endpositionen

Im vorherigen Beispiel für einen radialen Farbverlauf sind die x- und y-Koordinaten für die Anfangs- und Endposition gleich ("52" bzw. "50"), und nur die Größe des Radius der einzelnen Kreise wurde von "100" auf "200" erhöht. Dadurch wird die Schattierung des radialen Farbverlaufs in der Mitte des Kreises zentriert.

Wenn Sie die Anfangs- und Endpositionen noch weiter auseinander bewegen, erhalten Sie einen kegelähnlichen Farbverlauf, der sich über die Canvas erstreckt.
```
var myGradient = context.createRadialGradient(32, 30, 5, 60, 60, 50);
```
In diesem Beispiel lauten die x- und y-Koordinaten des Anfangskreises "32" und "30", und der Radius ist "5". Die x- und y-Koordinaten des Endkreises lauten "60" und "60", und der Radius ist mit "50" größer. Hier ist das Ergebnis:

Schritt 3: Festlegen der Farbmarkierungen

Ein Farbverlauf hat mindestens zwei "addColorStop"-Methoden:

addColorStop(offset, color)

Um eine Farbmarkierung hinzuzufügen, müssen Sie die anzuwendende Farbe und ihre versetzte Position zusammen mit dem Farbverlauf angeben. Farbverlaufspositionen können zwischen "0" (am Anfang des Farbverlaufs) und "1" (am Ende des Farbverlaufs) liegen.

In unserem Beispiel wird die Variable "myGradient" verwendet, um "addColorStop" von "0" auf "1" festzulegen, damit die Schattierung des Farbverlaufs gleichmäßig von Weiß nach Schwarz verläuft.

myGradient.addColorStop(0,"white");
myGradient.addColorStop(1,"black");

Mehrere Farbmarkierungen

Sie können mehrere Farbmarkierungen verwenden. In diesem Beispiel weist eine zweite "addColorStop"-Methode auf halber Höhe des Farbverlaufs eine Farbmarkierung zu:
```
  myGradient.addColorStop(0,"orange");
  myGradient.addColorStop(.5, "green");
  myGradient.addColorStop(1, "blue");
```
Dadurch entsteht dieser Farbverlauf:

Schritt 4: Festlegen des Füllstils

Bevor der Farbverlauf gezeichnet wird, muss "fillStyle" auf die Variable "myGradient" festgelegt werden.

context.fillStyle = myGradient;

Zuletzt wird die "fillRect"-Methode verwendet, um das Bild zu zeichnen:

context.fillRect(0, 0, 200, 100);

Vollständige Beispiele

Linearer Farbverlauf

Dieser JavaScript-Code verwendet ein Canvaselement, um ein Rechteck zu zeichnen, und verwendet dann einen diagonalen linearen Farbverlauf als "fillStyle"-Eigenschaft des Rechtecks.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

    // Create a linear gradient.
    var myGradient=context.createLinearGradient(0, 0, 300, 100);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.
    context.fillStyle = myGradient;

    // Draw the rectangle.
    context.fillRect(0, 0, 200, 100);
}

Radialer Farbverlauf

Dieser JavaScript-Code verwendet ein Canvaselement, um einen Kreis zu zeichnen, und verwendet dann einen radialen Farbverlauf als "fillStyle"-Eigenschaft des Kreises.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
  
    // Create the radial gradient.
    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.     
    context.fillStyle = myGradient;

    // Draw a circle.
    context.beginPath();
    context.arc(52, 50, 40, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();
}

CSS (Cascading Stylesheets)

Dies ist ein Beispiel für ein Cascading Stylesheet (CSS), das einen grauen Rahmen um ein Canvaselement erstellt.

/* Style the canvas element with a grey border. */
canvas { border: 1px solid #c3c3c3; }

HTML-Datei

Diese HTML-Datei erstellt ein Canvaselement und verwendet externe JavaScript- und CSS-Dateien.

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

Freigeben über