HTML5 -Leinwand, ein Tutorial für Anfänger

Die HTML5 -Spezifikation führt viele neue Funktionen ein, eines der aufregendsten ist das Canvas -Element. HTML 5 Canvas bietet eine Möglichkeit, Grafiken über JavaScript zu zeichnen, was einfach zu bedienen ist, aber leistungsfähig ist. Jedes Canvas -Element verfügt über einen Kontext (Kontext) (denken Sie als Seite auf einer Zeichenbrett), auf der jede Form gezogen werden kann. Der Browser unterstützt mehrere Canvas -Kontexte und bietet grafische Zeichnungsfunktionen über verschiedene APIs. Die meisten Browser unterstützen 2D -Leinwandkontexte - einschließlich Oper, Firefox, Konqueror und Safari. Darüber hinaus unterstützen einige Versionen der Opera auch 3D-Leinwand, und Firefox kann auch 3D-Leinwand durch Plug-Ins unterstützen.

In diesem Artikel werden die Grundlagen von 2D -Leinwand und die Verwendung grundlegender Leinwandfunktionen wie Linien, Formen, Bilder und Text vorgestellt. Um diesen Artikel zu verstehen, sollten Sie die Grundlagen von JavaScript besser verstehen.

Sie können hier klicken, um den Beispielcode in diesem Artikel in Stapeln herunterzuladen

Canvas -Grundlagen:

Die Methode zum Erstellen von Canvas ist einfach. Sie müssen nur das <Canvas> -Element zur HTML -Seite hinzufügen:

<canvas id = mycanvas width = 300 Höhe = 150>

Fallback -Inhalt, falls der Browser keine Leinwand unterstützt.

</canvas>

Um Elemente in JavaScript zu verweisen, ist es am besten, die Element -ID festzulegen. Sie müssen auch die Höhe und Breite der Leinwand festlegen.

Sobald die Leinwand erstellt wurde, bereiten wir den Pinsel vor. Um eine Grafik in einer Leinwand zu zeichnen, müssen Sie JavaScript verwenden. Finden Sie zuerst das Canvas -Element über die GetElementByID -Funktion und initialisieren Sie dann den Kontext. Anschließend können verschiedene Grafiken mit der Kontext -API gezeichnet werden. Das folgende Skript zeichnet ein Rechteck in Leinwand (klicken Sie hier, um den Effekt anzuzeigen):

// Erhalten Sie einen Verweis auf das Element.

var elem = document.getElementById ('mycanvas');

// Überprüfen Sie immer nach Eigenschaften und Methoden, um sicherzustellen, dass Ihr Code nicht brechen

// in anderen Browsern.

if (elem && elem.getContext) {

// Erhalten Sie den 2D -Kontext.

// Denken Sie daran: Sie können nur einen Kontext pro Element initialisieren.

var context = elem.getContext ('2d');

if (Kontext) {

// du bist fertig! Jetzt können Sie Ihr erstes Rechteck zeichnen.

// Sie müssen nur die (x, y) Koordinaten bereitstellen, gefolgt von der Breite und

// Höhenabmessungen.

Context.FillRect (0, 0, 150, 100);

}

}

Sie können den oben genannten Code im Kopfteil des Dokuments oder in einer externen Datei platzieren.

2D -Kontext -API:

Nachdem wir die Canvas erstellt haben, schauen wir uns die 2D -Canvas -API an, um zu sehen, was mit diesen Funktionen getan werden kann.

Grundleitungen:

Das obige Beispiel zeigt, wie einfach es ist, ein Rechteck zu zeichnen.

Die Fillstyle- und Strokestyle -Eigenschaften können leicht für Rechteckfüllung und Linien eingestellt werden. Der Farbwert wird genauso wie CSS verwendet: Hexadezimalzahl, RGB (), RGBA () und HSLA. FillRect kann verwendet werden, um ein Rechteck mit Fillrect zu zeichnen. Verwenden Sie Strokerect, um Rechtecke mit nur Grenzen und ohne Füllungen zu zeichnen. Wenn Sie einige Leinwand löschen möchten, können Sie ClearRect verwenden. Die Parameter der oben genannten drei Methoden sind gleich: x, y, breite, Höhe. Die ersten beiden Parameter setzen die (x, y) Koordinaten und die letzten beiden Parameter die Höhe und Breite des Rechtecks. Sie können die Linewidth -Eigenschaft verwenden, um die Leitungsdicke zu ändern. Schauen wir uns die Beispiele mit Fillrect, Strokerect Clearrect und anderen an:

context.fillStyle = '#00f'; // Blau

context.strokestyle = '#f00'; // Rot

context.lineWidth = 4;

// Zeichnen Sie einige Rechtecke.

Context.FillRect (0, 0, 150, 50);

Context.Strokerect (0, 60, 150, 50);

context.clearrect (30, 25, 90, 60);

Kontext.Strokerect (30, 25, 90, 60);

Dieses Beispiel -Rendering ist in der folgenden Abbildung dargestellt:

Weg:

Willkürliche Formen können über den Canvas -Pfad (Pfad) gezeichnet werden. Sie können zuerst den Umriss zeichnen und dann den Rand ziehen und füllen. Das Erstellen einer benutzerdefinierten Form ist einfach, zeichnen Sie mit BeginnPath () und zeichnen Sie Ihre Figur mit geraden Linien, Kurven und anderen Grafiken. Nach dem Zeichnen füllen Sie Füllungen und Schlaganfälle, um Füllungen hinzuzufügen oder Grenzen zu setzen. Rufen Sie Conepath () an, um die benutzerdefinierte grafische Zeichnung zu beenden. Hier ist ein Beispiel für das Zeichnen eines Dreiecks:

// Setzen Sie die Stileigenschaften.

context.fillStyle = '#00f';

context.strokestyle = '#f00';

context.lineWidth = 4;

context.beginPath ();

// Beginnen Sie vom oberen linken Punkt.

context.moveto (10, 10); // Geben Sie die (x, y) Koordinaten an

context.lineto (100, 10);

context.lineto (10, 100);

context.lineto (10, 10);

// Erledigt! Füllen Sie nun die Form und zeichnen Sie den Schlaganfall.

// HINWEIS: Ihre Form ist nicht sichtbar, wenn Sie eine der beiden Methoden anrufen.

context.fill ();

context.stroke ();

context.closepath ();

Die Renderings sind in der folgenden Abbildung dargestellt:

Ein weiteres komplexeres Beispiel verwendet gerade Linien, Kurven und Bögen.

Bild einfügen:

Die Drawimage -Methode ermöglicht das Einfügen anderer Bilder (IMG- und Leinwandelemente) in Leinwand. In der Opera können Sie SVG -Grafiken in Leinwand zeichnen. Diese Methode ist komplizierter und kann 3, 5 oder 9 Parameter haben

3 Parameter: Die grundlegendste Methode zur Verwendung von Drawimage. Ein Parameter gibt die Bildposition an, und die anderen beiden Parameter geben die Position des Bildes in Leinwand an.

5 Parameter: Methode für die Verwendung von Intermediate Drawimage, einschließlich der 3 oben genannten Parameter, fügen Sie zwei Parameter hinzu, um die Bildbreite und Höhe des Einfügens anzuzeigen (wenn Sie die Bildgröße ändern möchten).

9 Parameter: Das komplexeste Drawage ist eine Methode für gemischte Verwendung, einschließlich der oben genannten 5 Parameter, und die anderen 4 Parameter setzen die Position und die Höhenbreite im Quellbild fest. Mit diesen Parametern können Sie das Quellbild dynamisch aufschneiden, bevor Sie es anzeigen.

Hier sind drei Beispiele der oben genannten Verwendungsmethoden:

// Drei Argumente: Das Element, das Ziel (x, y) Koordinaten.

context.drawimage (img_elem, dx, dy);

// fünf Argumente: das Element, das Ziel (x, y) und das Ziel

// Breite und Höhe (wenn Sie die Größe des Quellbildes ändern möchten).

context.drawimage (img_elem, dx, dy, dw, dh);

// Neun Argumente: Das Element, Quelle (x, y) Koordinaten, Quellenbreite und

// Höhe (zum Anschneiden), Ziel (x, y) und Zielbreite

// und Höhe (Größenänderung).

context.drawimage (img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

Der Effekt ist in der folgenden Abbildung dargestellt:

Operation auf Pixelebene:

Die 2D-Kontext-API bietet drei Methoden für Operationen auf Pixelebene: CreateImagedata, getImagedata und putimagedata. Das Imagedata -Objekt speichert den Pixelwert des Bildes. Jedes Objekt hat drei Eigenschaften: Breite, Höhe und Daten. Der Datenattributtyp ist CanvaspixelArray, mit dem die Breite*4 Pixelwerte gespeichert werden. Jedes Pixel hat einen RGB -Wert und einen Transparenz -Alpha -Wert (seine Werte betragen 0 bis 255, einschließlich Alpha!). Die Reihenfolge der Pixel wird von links nach rechts von oben nach unten nach Zeile gespeichert. Um das Prinzip besser zu verstehen, schauen wir uns ein Beispiel an - zeichnen Sie ein rotes Rechteck:

// Erstellen Sie ein Imagedata -Objekt.

var imgd = context.createimagedata (50,50);

var pix = imgd.data;

// über jedes Pixel schleifen und ein transparentes Rot einstellen.

für (var i = 0; n = pix.length, i <n; i += 4) {

pix [i] = 255; // Roter Kanal

pix [i+3] = 127; // Alpha -Kanal

}

// Zeichnen Sie das Imagedata -Objekt an den angegebenen (x, y) Koordinaten.

context.putimagedata (IMGD, 0,0);

Hinweis: Nicht alle Browser implementieren createImagedata. In unterstützten Browsern muss das Imagedata -Objekt über die GetImagedata -Methode erhalten werden. Bitte beachten Sie den Beispielcode.

Imagedata kann verwendet werden, um viele Funktionen zu erfüllen. Beispielsweise können Bildfilter implementiert werden oder mathematische Visualisierungen können implementiert werden (wie Fraktale und andere Spezialeffekte). Die folgenden Spezialeffekte implementieren einen einfachen Farbinversionsfilter:

// Holen Sie sich das CanvaspixelArray aus den angegebenen Koordinaten und Dimensionen.

var imgd = context.getImagedata (x, y, width, Höhe);

var pix = imgd.data;

// über jedes Pixel schleifen und die Farbe umkehren.

für (var i = 0, n = pix.length; i <n; i += 4) {

pix [i] = 255 - pix [i]; // Rot

pix [i+1] = 255 - pix [i+1]; // Grün

pix [i+2] = 255 - pix [i+2]; // Blau

// i+3 ist Alpha (das vierte Element)

}

// Zeichne die Imagedata an den angegebenen (x, y) Koordinaten.

context.putimagedata (IMGD, x, y);

Die folgende Abbildung zeigt den Effekt nach der Verwendung dieses Filters:

Wort:

Obwohl die jüngste Webkit -Version und Firefox 3.1 Nightly Build gerade erst begonnen haben, die Text -API zu unterstützen, um die Integrität des Artikels zu gewährleisten, habe ich beschlossen, die Text -API hier noch vorzustellen.

Die folgenden Texteigenschaften können im Kontextobjekt festgelegt werden:

Schriftart: Texteschrift, genau wie das CSSFont-Familie-Attribut

Textalign: Texthorizontale Ausrichtung. Wünschenswerte Attributwerte: Start, Ende, links, rechts, Mitte. Standardwert: Start.

textbaseline: vertikale Ausrichtung des Textes. Wünschenswerte Attributwerte: oben, hängen, mittlere, alphabetische, ideographische, unten. Standardwert: Alphabetisch

Es gibt zwei Möglichkeiten, Text zu zeichnen: filtext und stroketext. Der erste zeichnet Text mit Fillstyle -Füllung. Letztere zeichnet Text nur mit dem Strokestyle -Rand. Die Parameter von beiden sind gleich: Der zu ziehen zu zeichnen und die Position (x, y) des Textes. Es gibt auch eine optionale Option - maximale Breite. Bei Bedarf reduziert der Browser den Text auf die angegebene Breite. Das Attribut für Textausrichtungen beeinflusst die relative Position des Textes zum SET -Koordinaten (x, y).

Hier ist ein Beispiel für das Zeichnen von Hello World -Text in Leinwand:

context.fillStyle = '#00f';

context.font = 'italic 30px sans-serif';

context.textbaseline = 'top';

context.FillText ('Hallo Welt!', 0, 0);

context.font = 'BOLD 30PX SANS-SERIF';

context.stroketext ('Hallo Welt!', 0, 50);

Das folgende Bild ist das Rendering:

Schatten:

Derzeit stützen nur Konqueror und Firefox 3.1 die Shadows -API. Die Eigenschaften der API sind:

ShadowColor: Schattenfarbe. Sein Wert stimmt mit dem CSS -Farbwert überein.

Shadowblur: Legt den Grad der Schattenschärfe fest. Je größer dieser Wert ist, desto verschwommener der Schatten. Sein Effekt ist der gleiche wie der Gaußsche Fuzzy -Filter von Photoshop.

ShadowOffsetx und Shadowoffsety: Die X- und Y -Offsets des Schattens in Pixeln.

Hier ist ein Beispiel für den Leinwandschatten:

context.shadowOffsetX = 5;

context.shadowOffsety = 5;

context.shadowblur = 4;

context.shadowColor = 'rgba (255, 0, 0, 0,5)';

context.fillStyle = '#00f';

Context.FillRect (20, 20, 150, 100);

Der Effekt ist in der folgenden Abbildung dargestellt:

Farbverlauf:

Zusätzlich zu CSS -Farben können Fillstyle- und Strokestyle -Eigenschaften auf Canvasabgradient -Objekte eingestellt werden. -Anleitungsgradienten können über Leitungen und Füllungen über Leinwandgradient verwendet werden. Um ein leckeres Objekt zu erstellen, können Sie zwei Methoden verwenden: Createlineargradient und Createur Gradent. Ersteres erzeugt einen linearen Farbgradienten, und letzteres erzeugt einen kreisförmigen Farbgradienten. Nach dem Erstellen eines Farbgradientenobjekts können Sie die AddColorStop -Methode des Objekts verwenden, um Farb -Zwischenwerte hinzuzufügen. Der folgende Code zeigt, wie Farbgradienten verwendet werden:

// Sie müssen die Koordinaten der Quell- und Ziel- (X, Y) bereitstellen

// für den Gradienten (von wo er beginnt und wo er endet).

var gradient1 = context.createlineargradient (sx, sy, dx, dy);

// Jetzt können Sie Farben in Ihrem Gradienten hinzufügen.

// Das erste Argument zeigt die Position für die Farbe in Ihrem Gradienten. Der

// Der akzeptierte Wertbereich ist von 0 (Gradientenstart) bis 1 (Gradientenende).

// Das zweite Argument zeigt die gewünschte Farbe mit dem CSS -Farbformat an.

gradient1.addcolorstop (0, '#f00'); // Rot

Gradient1.AddcolorStop (0,5, '#ff0'); // Gelb

gradient1.addcolorstop (1, '#00f'); // Blau

// Für den radialen Gradienten müssen Sie auch Quelle bereitstellen

// und Zielkreisradius.

// Die (x, y) Koordinaten definieren die Circle Center -Punkte (Start und

// Ziel).

var gradient2 = context.createradialgradient (SX, SY, SR, DX, DY, DR);

// Das Hinzufügen von Farben zu einem radialen Gradienten ist das gleiche wie das Hinzufügen von Farben zu linear

// Gradienten.

Ich habe auch ein komplexeres Beispiel mit linearen Farbgradienten, Schatten und Text vorbereitet.

Der Effekt ist in der folgenden Abbildung dargestellt:

Canvas -Demo:

Wenn Sie wissen möchten, was Sie mit Leinwand machen können, finden Sie das folgende Projekt:

Opera Widget:

Simaquarium

Künstlerskizzle

Spirographie

Online -Engineering und Demonstration:

Newton Polynom

Canvascape - 3D Walker

Paint.Web - Demo Malerei, Open -Source

Sternfeldflug

Interaktiver Blob

Unterabschnitt:

Canvas ist eine der am meisten erwarteten Funktionen von HTML 5 und wird derzeit von den meisten Webbrowsern unterstützt. Leinwand kann dabei helfen, Spiele zu erstellen und grafische Benutzeroberflächen zu verbessern. 2D -Kontext

Die API bietet viele Grafik -Zeichnungsfunktionen - ich hoffe, Sie haben gelernt, Leinwand in diesem Artikel zu verwenden, und Sie sind daran interessiert, mehr zu lernen!