5 Die Spezifikation führt viele neue Funktionen ein, eines der aufregendsten ist canvas -Element. HTML5 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) (als eine Seite auf der Zeichenplatte betrachtet), auf der jede Form gezogen werden kann. Der Browser unterstützt mehrere Canvas -Kontexte und bietet grafische Zeichnungsfunktionen über verschiedene. Bietet eine grafische Zeichnungsfunktion. 5 Die Spezifikation führt viele neue Funktionen ein, eines der aufregendsten sind die Elemente. HTML5 bietet eine Methode zum Zeichnen von Grafiken über JavaScript, die einfach zu verwenden, aber leistungsfähig ist. Jedes Element hat einen Kontext (Kontext) (denken Sie als Seite auf einer Zeichenbrett), auf der eine Form gezogen werden kann. Der Browser unterstützt mehrere Canvas -Kontexte und bietet grafische Zeichnungsfunktionen über verschiedene.
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:
Kontextartikel
In diesem Artikel wird 2D -Leinwand vorgestellt
Grundlagen und wie man grundlegende Canvas -Funktionen wie Linien, Formen, Bilder und Text verwendet. 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
Die Methode zum Erstellen von Canvas ist sehr einfach. Sie müssen nur das <canvas> -Element zur HTML -Seite hinzufügen:
<canvas id=mycanvas width=300 height=150>fallback content, in case the browser does not support canvas.</canvas>Um Elemente in JavaScript verweisen zu können, ist es am besten, die ID für das Element festzulegen. Es muss auch die Höhe und Breite für 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 Leinwand über getelementbyid -Funktion
Element, dann den Kontext initialisieren. Verschiedene Grafiken können später mit der Kontext -API gezeichnet werden. Das folgende Skript zeichnet ein Rechteck in Leinwand (klicken Sie hier, um den Effekt anzuzeigen):
// get a reference to the element.var elem = document.getelementbyid('mycanvas');// always check for properties 和methods, to make sure your code doesn't break // in other browsers.if (elem && elem.getcontext) { // get the 2d context. // remember: you can only initialize one context per element. var context = elem.getcontext('2d'); if (context) { // you are done! now you can draw your first rectangle. // you only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillrect(0, 0, 150, 100); }} Sie können den oben genannten Code im head des Dokuments oder in einer externen Datei platzieren.
Schauen wir uns die 2D -Canvas -API an und sehen Sie, was mit diesen Funktionen getan werden kann, nachdem wir die Canvas erstellt haben.
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. Farbwertverbrauchsmethode und Hexadezimalzahl (), () und () (wenn der Browser sie unterstützt, wie z. B. Opera
10 und Firefox 3). () (Wenn der Browser es unterstützt, wie z. B. Opera10 und Firefox 3). () und () (wenn der Browser es unterstützt, wie z. B. Opera10 und Firefox 3). (), () und () (wenn der Browser es unterstützt, wie z. B. Opera10 und Firefox 3). Hexadezimalzahlen, (), () und () (wenn vom Browser wie Opera10 und Firefox 3) unterstützt.
fillrect kann verwendet werden, um ein Füllrechteck 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 das Linienbreitenattribut verwenden, um die Leitungsdicke zu ändern. Mal sehen, ob fillrect verwendet wird,
strokerect clearrect und andere Beispiele:
context.fillstyle = '#00f'; // bluecontext.strokestyle = '#f00'; // redcontext.linewidth = 4;// draw some rectangles.context.fillrect (0, 0, 150, 50);context.strokerect(0, 60, 150, 50);context.clearrect (30, 25, 90, 60);context.strokerect(30, 25, 90, 60);Dieses Beispiel -Rendering ist in Abbildung 1 dargestellt.
Abbildung 1: Fillrect, Strokerect und
ClearRect Effect Diagramm
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 beginpath() und zeichnen Sie Ihre Figur mit geraden Linien, Kurven und anderen Grafiken. Nach dem Zeichnen fill und stroke , um Füllungen hinzuzufügen oder Grenzen zu setzen. Rufen Sie closepath() an, um die benutzerdefinierte grafische Zeichnung zu beenden.
Hier ist ein Beispiel für das Zeichnen eines Dreiecks:
// set the style properties.context.fillstyle = '#00f';context.strokestyle = '#f00';context.linewidth = 4;context.beginpath();// start from the top-left point.context.moveto(10, 10); // give the (x,y) coordinatescontext.lineto(100, 10);context.lineto(10, 100);context.lineto(10, 10);// done! now fill the shape, 和draw the stroke.// note: your shape will not be visible until you call any of the two methods.context.fill();context.stroke();context.closepath();Die Renderings sind in Abbildung 2 dargestellt.
Abbildung 2: Dreieck
Ein weiteres verantwortungsvolles Beispiel verwendet gerade Linien, Kurven und Bögen.
Die drawimage -Methode ermöglicht das Einfügen anderer Bilder in Leinwand
( img und canvas ). Im Bediener können Sie SVG -Grafiken in Leinwand zeichnen. Diese Methode ist ziemlich komplex und kann 3, 5 oder 9 Parameter haben:
drawimage . Ein Parameter gibt die Bildposition an, und die anderen beiden Parameter geben die Position des Bildes in Leinwand an.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).drawimage -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:
// three arguments: the element, destination (x,y) coordinates.context.drawimage( img_elem , dx , dy );// five arguments: the element, destination (x,y) coordinates, and destination // width and height (if you want to resize the source image).context.drawimage( img_elem , dx , dy , dw , dh );// nine arguments: the element, source (x,y) coordinates, source width and // height (for cropping), destination (x,y) coordinates, and destination width // and height (resize).context.drawimage( img_elem , sx , sy , sw , sh , dx , dy , dw , dh );Der Effekt ist in Abbildung 3 dargestellt.
Abbildung 3: drawimage Rendering.
Die 2D-Kontext-API enthält 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 width * height *4 Pixelwerte gespeichert werden. Jedes Pixel hat einen RGB -Wert und einen Transparenz -Alpha -Wert (sein Wert beträgt 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 - ein rotes Rechteck zeichnen
// create an imagedata object.var imgd = context.createimagedata(50,50);var pix = imgd.data;// loop over each pixel 和set a transparent red.for (var i = 0; n = pix.length, i < n; i += 4) { pix[i ] = 255; // red channel pix[i+3] = 127; // alpha channel}// draw the imagedata object at the given (x,y) coordinates.context.putimagedata(imgd, 0,0); Hinweis: Nicht alle Browser implementieren createimagedata . In unterstützten Browsern muss imagedata -Objekt über getimagedata -Methode erhalten werden. Bitte beachten Sie den Beispielcode.
Viele Funktionen können durch imagedata erfüllt werden. 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:
// get the canvaspixelarray from the given coordinates and dimensions.var imgd = context.getimagedata( x , y , width , height );var pix = imgd.data;// loop over each pixel and invert the color.for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element)}// draw the imagedata at the given (x,y) coordinates.context.putimagedata(imgd, x , y );Abbildung 4 zeigt die Oper nach der Verwendung dieses Filters
Bild (Abbildung 3 ist das Originalbild).
Abbildung 4: Farbinversionsfilter
Obwohl die jüngste Webkit -Version und Firefox 3.1 Nightly Build erst mit der Unterstützung von Text -APIs begonnen haben, um die Integrität des Artikels zu gewährleisten, habe ich beschlossen, die Text -API hier noch vorzustellen.
Die folgenden Texteigenschaften können im context festgelegt werden:
font : Textschrift, gleich font-family Attributattribut
textalign : Texthorizontale Ausrichtung. Wünschenswerte Attributwerte: start , end , left , right , center . Standardwert:
start .
textbaseline : vertikale Ausrichtung des Textes. Wünschenswerte Attributwerte: top , hanging , middle , alphabetic , ideographic , bottom . Standardwert: alphabetic .
Es gibt zwei Möglichkeiten, Text zu zeichnen: filltext und stroketext . Der erste zeichnet Text mit Fillstyle -Füllung, letzterer zeichnet Text mit nur Rand im Schlaganfallstil . 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 Textausrichtungsattribut beeinflusst Text und Einstellungen
(x, y) Die relative Position der Koordinaten.
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 ('hello world!', 0, 0);context.font = 'bold 30px sans-serif';context.stroketext('hello world!', 0, 50);Abbildung 5 ist das Rendering.
Abbildung 5: Textwirkung
Derzeit nur Konqueror und Firefox 3.1 Nightly Build Support 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 in 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 Abbildung 6 dargestellt.
Abbildung 6: Canvas -Schatteneffekt - Blaues Rechteck, roter Schatten
Zusätzlich zur CSS -Farbe können fillstyle und strokestyle -Eigenschaften auf canvasgradient -Objekte eingestellt werden. - canvasgradient kann Farbgradienten für Linien und Füllungen verwenden.
Um ein canvasgradient Objekt zu erstellen, können Sie zwei Methoden verwenden: createlineargradient und createradialgradient . 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:
// you need to provide the source 和destination (x,y) coordinates // for the gradient (from where it starts 和where it ends).var gradient1 = context.createlineargradient( sx , sy , dx , dy );// now you can add colors in your gradient.// the first argument tells the position for the color in your gradient. the // accepted value range is from 0 (gradient start) to 1 (gradient end).// the second argument tells the color you want, using the css color format.gradient1.addcolorstop(0, '#f00'); // redgradient1.addcolorstop(0.5, '#ff0'); // yellowgradient1.addcolorstop(1, '#00f'); // blue// for the radial gradient you also need to provide source// 和destination circle radius.// the (x,y) coordinates define the circle center points (start 和// destination).var gradient2 = context.createradialgradient( sx , sy , sr , dx , dy , dr );// adding colors to a radial gradient is the same as adding colors to linear // gradients.Ich habe auch ein komplexeres Beispiel mit linearen Farbgradienten, Schatten und Text vorbereitet. Der Effekt ist in Abbildung 7 dargestellt.
Abbildung 7: Beispiel für die Verwendung eines linearen Farbgradienten
Wenn Sie wissen möchten, was Sie mit Leinwand machen können, finden Sie das folgende Projekt:
Skizzenbuch
Demo, Open-Source
Flug
Canvas ist eine der am meisten erwarteten Funktionen von HTML5 und wurde von den meisten Webbrowsern unterstützt. Leinwand kann dabei helfen, Spiele zu erstellen und grafische Benutzeroberflächen zu verbessern. 2D -Kontext
API bietet viele Grafik -Zeichnungsfunktionen - ich hoffe, Sie haben gelernt, Leinwand in diesem Artikel zu verwenden, und Sie sind daran interessiert, mehr zu lernen!