Bevor wir mit dem Zeichnen beginnen können, müssen wir über das Leinwandgitter oder über den Koordinatenraum sprechen. Die HTML -Vorlage auf der vorherigen Seite hatte ein Canvas -Element 150 Pixel breit und 150 Pixel hoch. Ich habe dieses Bild mit dem Standardgitter überlagert. Normalerweise entspricht 1 Einheit im Netz 1 Pixel auf der Leinwand. Der Ursprung dieses Gitters ist in der oberen linken Ecke (Koordinate (0,0)) positioniert. Alle Elemente sind relativ zu diesem Ursprung platziert. Die Position der oberen linken Ecke des blauen Quadrats wird also zu X -Pixeln von links und y -Pixel von oben (Koordinate (x, y)). Später in diesem Tutorial werden wir sehen, wie wir den Ursprung in eine andere Position übersetzen, das Netz drehen und sogar skalieren können. Im Moment bleiben wir uns an die Standardeinstellung.
Bevor wir wirklich anfangen, müssen wir den Raster oder Koordinatenraum der Leinwand erkunden. Auf der vorherigen Seite befindet sich eine 150 Pixel breite und 150 Pixel in der HTML -Vorlage. Ich überlagere das Standardraster auf dem Bildschirm, wie im Bild rechts gezeigt. Normalerweise entspricht eine Zelle des Netzes einem Pixel auf der Leinwand. Der Ursprung des Netzes ist in der oberen linken Ecke (Koordinaten (0,0)) positioniert. Die Positionen aller Objekte im Bild sind relativ zu diesem Ursprung. Auf diese Weise ist die Position des blauen Quadrats in der oberen linken Ecke das x -Pixel von links und y Pixel von der oberen Seite (Koordinaten (x, y)). Im folgenden Tutorial lernen wir, wie Sie den Ursprung bewegen, das Netz drehen und skalieren. Aber jetzt werden wir den Standardzustand verwenden.
Im Gegensatz zu SVG unterstützt Leinwand nur eine primitive Form - Rechtecke. Alle anderen Formen müssen durch Kombinieren eines oder mehrerer Pfade erzeugt werden. Zum Glück haben wir eine Sammlung von Pfadzeichnungsfunktionen, die es ermöglichen, sehr komplexe Formen zu komponieren.
Im Gegensatz zu SVG unterstützt Leinwand nur eine grundlegende Form - Rechteck, sodass andere Formen aus einem oder mehreren Pfaden bestehen. Glücklicherweise gibt es eine Reihe von Pfadzeichnungsfunktionen, die es uns ermöglichen, ziemlich komplexe Formen zu zeichnen.
Schauen wir uns zuerst das Rechteck an. Es gibt drei Funktionen, die Rechtecke auf der Leinwand zeichnen:
Schauen wir uns zuerst das Rechteck an. Es gibt drei Funktionen zum Zeichnen von Rechtecken:
FILLRECTE (X, Y, Breite, Höhe): Zeichnet ein gefülltes Rechteck Strokerect (X, Y, Breite, Höhe): Zeichnet einen rechteckigen Umriss ClearRect (X, Y, Breite, Höhe): Löscht den angegebenen Bereich und macht ihn vollständig transparentJede dieser drei Funktionen erfordern die gleichen Parameter. x und y geben die Position auf der Leinwand (relativ zum Ursprung) der oberen linken Ecke des Rechtecks an. Breite und Höhe sind ziemlich offensichtlich. Lassen Sie uns diese Funktionen in Aktion sehen.
Sie alle akzeptieren vier Parameter, x und y, die Position der oberen linken Ecke des Rechtecks (relativ zum Ursprung), und die Breite und Höhe sind die Breite und Höhe des Rechtecks. Ok, lass uns einige praktische Schlachten haben.
Unten finden Sie die Funktion Draw () von der vorherigen Seite, aber jetzt habe ich die drei oben genannten Funktionen hinzugefügt.
Das Folgende ist die Funktion Draw () in der Vorlage auf der vorherigen Seite, die obigen drei Funktionen werden jedoch hinzugefügt.
Beispiel anzeigen
Funktion Draw () {var canvas = document.getElementById ('Tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); CTX.FillRect (25,25,100.100); ctx.clearRect (45,45,60,60); ctx.strokerect (50,50,50,50); }}Das Ergebnis sollte ungefähr das Bild auf der rechten Seite aussehen. Die FillRect -Funktion zeichnet ein großes schwarzes Quadrat 100x100 Pixel. Die ClearRect -Funktion entfernt ein Quadrat von 60 x 60 Pixeln aus der Mitte und schließlich zeichnet der Strokerect einen rechteckigen Umriss 50x50 Pixel innerhalb des gelöschten Quadrats. Auf den folgenden Seiten werden zwei alternative Methoden für die ClearRect -Funktion angezeigt, und wir werden auch sehen, wie man die Farbe und den Schlaganfall der gerenderten Formen verändert.
Das Ergebnis sollte das gleiche sein wie das rechts. Die FillRect-Funktion zeichnet ein großes schwarzes Rechteck (100x100), die ClearRect-Funktion löscht das 60x60-Quadrat in der Mitte, und dann beschreibt die Strokerect-Funktion einen 50x50-Rechteckgrenze im gelöschten Raum. Auf der nächsten Seite sehen wir zwei andere Methoden, die der ClearRect -Funktion ähneln, sowie wie die Füll- und Randfarbe der Abbildung geändert werden kann.
Im Gegensatz zu den Pfadfunktionen, die wir im nächsten Abschnitt sehen werden, ziehen alle drei Rechteckfunktionen sofort auf die Leinwand.
Im Gegensatz zur Pfadfunktion im nächsten Abschnitt werden die Auswirkungen dieser drei Funktionen sofort auf Leinwand widerspiegelt.
Um Formen mit Pfaden herzustellen, benötigen wir ein paar zusätzliche Schritte.
Im Gegensatz zum Zeichnen eines Rechtecks erfordert das Zeichnen eines Pfades einige zusätzliche Schritte.
beginpath () Conepath () Schlaganfall () füllen ()Der erste Schritt, um einen Pfad zu erstellen, besteht darin, die Anfangspath -Methode aufzurufen. Innen werden Pfade als Liste von Unterpaden (Linien, Bögen usw.) gespeichert, die zusammen eine Form bilden. Jedes Mal, wenn diese Methode aufgerufen wird, wird die Liste zurückgesetzt und wir können mit dem Zeichnen neuer Formen beginnen.
Der erste Schritt besteht darin, einen Pfad mit BeginnPath zu erstellen. Im Gedächtnis werden Pfade in Form eines Satzes von Unterfassen (Zeilen, Bögen usw.) gespeichert, die zusammen ein Diagramm bilden. Jedes Mal, dass BeginnPath aufgerufen wird, wird die Unterpfadgruppe zurückgesetzt und ein neues Diagramm kann gezogen werden.
Der zweite Schritt besteht darin, die Methoden aufzurufen, die tatsächlich die zu zeichnenden Pfade angeben. Wir werden diese in Kürze sehen.
Der zweite Schritt besteht darin, den Teil des Pfades tatsächlich zu zeichnen, den wir bald sehen werden.
Der dritte und ein optionaler Schritt wäre, die Closepath -Methode aufzurufen. Diese Methode versucht, die Form zu schließen, indem eine gerade Linie vom aktuellen Punkt zum Start gezogen wird. Wenn die Form bereits geschlossen wurde oder nur einen Punkt in der Liste ist, macht diese Funktion nichts.
Der dritte Schritt besteht darin, die Closepath -Methode aufzurufen, mit der versucht wird, den aktuellen Endpunkt an den Startendpunkt mit einer geraden Linie zu verbinden, um den Pfad zu schließen. Wenn der Diagramm jedoch bereits geschlossen ist oder es nur einen Punkt gibt, wird es nichts tun. Dieser Schritt ist nicht notwendig.
Der letzte Schritt wird darin bestehen, den Schlaganfall und/oder die Füllmethoden aufzurufen. Wenn Sie eine davon anrufen, wird die Form tatsächlich auf die Leinwand gezogen. Schlaganfall wird verwendet, um eine umrissene Form zu zeichnen, während die Füllung verwendet wird, um eine feste Form zu malen.
Der letzte Schritt besteht darin, den Schlaganfall oder die Füllmethode aufzurufen, und zu diesem Zeitpunkt wird der Diagramm tatsächlich auf der Leinwand gezeichnet. Schlaganfall ist der Grenze, der die Figur zeichnet, füllt sie mit einer soliden Figur.
HINWEIS: Wenn Sie die Füllmethode aufrufen, werden offene Formen automatisch geschlossen und es ist nicht erforderlich, die Closepath -Methode zu verwenden. HINWEIS: Wenn die Füllung aufgerufen wird, schließt der offene Pfad automatisch, ohne Conepath anzurufen.Der Code für eine einfache Form (ein Dreieck) würde ungefähr so aussehen.
Der Code zum Zeichnen einer einfachen Figur (z. B. ein Dreieck) ist wie folgt.
ctx.beginPath (); ctx.moveto (75,50); ctx.lineto (100,75); ctx.lineto (100,25); ctx.fill ();
Eine sehr nützliche Funktion, die eigentlich nichts zeichnet, sondern Teil der oben beschriebenen Pfadliste ist, ist die Moveto -Funktion. Sie können dies wahrscheinlich am besten als Anheben eines Stifts oder Bleistifts von einer Stelle auf einem Stück Papier vorstellen und auf die nächste platzieren.
MoveTo ist eine sehr nützliche Methode. Obwohl es nicht verwendet werden kann, um etwas zu zeichnen, ist es Teil eines praktischen Weges, um Wege zu zeichnen. Sie können es als den Prozess des Hebens des Stifts vorstellen und ihn von einem Punkt zum anderen bewegen.
MoveTo (x, y)Die Moveto -Funktion nimmt zwei Argumente - x und y - die Koordinaten des neuen Startpunkts.
Es akzeptiert X und Y (neue Koordinatenpositionen) als Parameter.
Wenn die Leinwand initialisiert oder die BeginnPath -Methode aufgerufen wird, wird der Startpunkt auf die Koordinate (0,0) eingestellt. In den meisten Fällen würden wir die Moveto -Methode verwenden, um den Ausgangspunkt woanders zu platzieren. Wir könnten auch die Moveto -Methode verwenden, um nicht verbundene Pfade zu zeichnen. Schauen Sie sich das Smiley -Gesicht rechts an. Ich habe die Orte markiert, an denen ich die Moveto -Methode verwendet habe (die roten Linien).
Wenn Canvas initialisiert oder beginpad aufgerufen wird, ist die Startkoordinateneinstellung der Ursprung (0,0). In den meisten Fällen verwenden wir die Moveto -Methode, um die Startkoordinaten an andere Orte zu verschieben oder diskontinuierliche Pfade zu zeichnen. Schauen Sie sich das lächelnde Gesicht rechts an, die rote Linie ist die Flugbahn, um sich mit Moveto zu bewegen.
Um dies selbst auszuprobieren, können Sie den Code -Snippet unten verwenden. Fügen Sie es einfach in die Draw -Funktion ein, die wir zuvor gesehen haben.
Probieren Sie den folgenden Code aus und fügen Sie ihn in die zuvor verwendete Draw -Funktion ein, um den Effekt anzuzeigen.
ctx.beginPath (); ctx.arc (75,75,50,0, math.pi*2, true); // Outer Circuitx.Moveto (110,75); ctx.arc (75,75,35,0, math.pi, false); // Mund (im Uhrzeigersinn) ctx.moveto (65,65); ctx.arc (60,65,5,0, math.pi*2, true); // links eyectx.moveto (95,65); ctx.arc (90,65,5,0, math.pi*2, true); // rechte eyectx.stroke ();Hinweis : Entfernen Sie die Moveto -Methoden, um die Verbindungsleitungen anzuzeigen. HINWEIS : Für eine Beschreibung der ARC -Funktion und ihrer Parameter sehen Sie unten. Hinweis: Sie können die Moveto -Methode kommentieren, um die verbundenen Linien zu beobachten. Hinweis: Die Verwendung der ARC -Methode ist unten dargestellt.
Zum Zeichnen gerader Linien verwenden wir die Lineto -Methode.
Wir verwenden die Lineto -Methode, um gerade Linien zu zeichnen.
Lineto (x, y)Diese Methode nimmt zwei Argumente an - x und y - die Koordinaten des Endpunkts der Linie. Der Ausgangspunkt hängt von früheren gezeichneten Pfaden ab, wobei der Endpunkt des vorherigen Pfads der Ausgangspunkt für die folgende usw. ist. Der Ausgangspunkt kann auch mithilfe der Moveto -Methode geändert werden.
Die Lineto -Methode akzeptiert die Koordinaten (x, y) des Endpunkts als Parameter. Die Startkoordinate hängt vom vorherigen Pfad ab. Der Endpunkt des vorherigen Pfades ist der Ausgangspunkt des aktuellen Pfades. Die Startkoordinate kann auch durch die Moveto -Methode eingestellt werden.
In dem folgenden Beispiel werden zwei Dreiecke gezeichnet, eine gefüllt und eine umrissen. (Das Ergebnis ist im Bild rechts zu sehen). Zunächst wird die BeginnPath -Methode aufgerufen, um einen neuen Formpfad zu beginnen. Wir verwenden dann die Moveto -Methode, um den Startpunkt in die gewünschte Position zu verschieben. Unterhalb dieser beiden Zeilen werden zwei Seiten des Dreiecks bestehen.
Das Beispiel (wie im Bild rechts gezeigt) besteht aus zwei Dreiecken, eine mit fester Farbe und einer gezogenen Kante. Rufen Sie zunächst die BeginnPath -Methode an, um einen neuen Pfad zu erstellen, und verwenden Sie dann die Moveto -Methode, um die Startkoordinate auf die gewünschte Position zu verschieben und dann zwei gerade Linien zu zeichnen, um die beiden Seiten des Dreiecks zu bilden.
Sie werden den Unterschied zwischen dem gefüllten und gestrichenen Dreieck bemerken. Dies ist, wie oben erwähnt, weil Formen automatisch geschlossen werden, wenn ein Pfad gefüllt ist. Wenn wir dies für das gestrichene Dreieck getan hätten, wären nur zwei Zeilen gezogen worden, kein vollständiges Dreieck.
Sie können den Unterschied zwischen Füll- und Strok -Zeichnen von Dreiecken bemerken. Wie oben erwähnt, schließt sich der Pfad mit der Verwendung von FILL automatisch, aber er wird nicht mit einem Schlaganfall erfolgen. Wenn der Pfad nicht geschlossen ist, werden nur zwei Seiten gezogen.
Beispiel anzeigen
// Dreieck ctx.beginPath (); ctx.moveto (25,25); ctx.lineto (105,25); ctx.lineto (25,105); ctx.beginPath (); ctx.moveto (125,125); ctx.lineto (125,45); ctx.lineto (45,125);
Zum Zeichnen von Bögen oder Kreisen verwenden wir die ARC -Methode. Die Spezifikation beschreibt auch die ARCTO -Methode, die von Safari unterstützt wird, aber in den aktuellen Gecko -Browsern nicht implementiert wurde.
Wir verwenden die ARC -Methode, um Bögen oder Kreise zu zeichnen. Die ARCTO -Methode ist auch in der Standardbeschreibung enthalten. Safari wird derzeit unterstützt, aber in Gecko-basierte Browser haben noch nicht implementiert.
Bogen (X, Y, Radius, Startangle, Endangle, gegen den Uhrzeigersinn)Diese Methode erfordert fünf Parameter: x und y sind die Koordinaten des Kreises des Kreises. Radius ist Self Erklärung. Die Parameter Startangle und Endangle definieren die Start- und Endpunkte des Bogens in Radians. Der Start- und Schlusswinkel wird aus der x -Achse gemessen. Der Parameter gegen den Gegenwart ist ein boolescher Wert, der bei True den Bogen gegen den Uhrzeigersinn zeichnet, ansonsten im Uhrzeigersinn.
Die Methode akzeptiert fünf Parameter: x, y ist die mittlere Koordinate, Radius ist der Radius, Startangel und Endangle sind die Start- und Endradianer (basierend auf der X-Achse als Referenz), gegen den Uhrzeigersinn ist wahr, was gegen den Uhrzeigersinn und gegen den Uhrzeigersinn bedeutet.
Warnung : Im Firefox -Beta -Build ist der letzte Parameter im Uhrzeigersinn. Die endgültige Version unterstützt die Funktion wie oben beschrieben. Alle Skripte, die diese Methode in ihrem aktuellen Formular verwenden, müssen aktualisiert werden, sobald die endgültige Version veröffentlicht wurde.WARNUNG: In der Beta -Version von Firefox ist der letzte Parameter im Uhrzeigersinn und die endgültige Version nicht. Wenn Sie also von Beta auf die Verteilung aktualisieren, müssen Sie entsprechende Änderungen vornehmen.
Hinweis : Winkel in der Bogenfunktion werden in Radians gemessen, nicht in Grad. Um Grad in Radians umzuwandeln, können Sie den folgenden JavaScript -Ausdruck verwenden: var radians = (math.pi/180)*Grad.HINWEIS: Der in der ARC -Methode verwendete Winkel besteht eher in Einheiten von Radians als in Grad. Direkte Umwandlung von Grad und Radians kann mit diesem Ausdruck verwendet werden: var radians = (math.pi/180)*Grad;.
Das folgende Beispiel ist etwas komplexer als die oben, die wir oben gesehen haben. Ich habe 12 verschiedene Bögen mit unterschiedlichen Blickwinkeln und Füllungen gezeichnet. Wenn ich dieses Beispiel wie das Smiley -Gesicht oben geschrieben hätte, wäre dies zuerst eine sehr lange Liste von Aussagen geworden, und zweitens müsste ich beim Zeichnen von Bögen jeden einzelnen Startpunkt kennen. Für Bögen von 90, 180 und 270 Grad, wie die hier verwendet, wäre dies kein großes Problem, aber für komplexere wird dies viel zu schwierig.
Dieses Beispiel ist komplizierter als das, was Sie zuvor gesehen haben. Es zeichnet 12 verschiedene Bögen mit unterschiedlichen Blickwinkeln und Füllzuständen. Wenn ich diese Bögen mit der obigen Methode zum Zeichnen von Smiley -Gesichtern zeichne, wäre es ein großes Stück Code, und wenn ich jeden Bogen zeichne, muss ich die Position der Mitte des Kreises kennen. Zum Beispiel ist das Zeichnen von Bögen von 90, 180 und 270 Grad auch ein Problem. Wenn die Grafiken komplizierter sind, ist es schwieriger, sie zu implementieren.
Die beiden für Schleifen dienen zum Schleifen durch die Zeilen und Säulen von Bögen. Für jeden Bogen beginne ich einen neuen Weg mit BeginnPath. Unter diesem habe ich alle Parameter als Variablen veröffentlicht, daher ist es einfacher zu lesen, was los ist. Normalerweise wäre dies nur eine Aussage. Die X- und Y -Koordinaten sollten klar genug sein. Radius und Startangle sind festgelegt. Das Endangle beginnt von As 180 Grad (erste Säule) und wird mit Schritten von 90 Grad erhöht, um einen vollständigen Kreis (letzte Spalte) zu bilden. Die Anweisung für den Parameter im Uhrzeigersinn führt dazu, dass die erste und dritte Zeile als Bögen im Uhrzeigersinn und die zweite und vierte Reihe als Bögen gegen den Uhrzeigersinn gezogen wird. Schließlich macht die IF -Aussage die obere Hälfte gestrichene Bögen und die unteren Bögen der unteren Hälfte.
Hier verwenden wir zwei für Schleifen, um Bögen mit mehreren Zeilen und Spalten zu zeichnen. Jeder Bogen erstellt einen neuen Pfad mit der BeginnPath -Methode. Dann habe ich für das einfache Lesen und Verständnis alle Parameter in variable Formen geschrieben. Es ist offensichtlich, dass X und Y die Zentralkoordinaten sind. Sowohl Radius als auch Startangel sind festgelegt, und Endangle beginnt von einem 180-Grad-Halbkreis und inschritten bis zum Kreis im 90-Grad-Modus. Gegen die Anzahl der ungeraden und gleichmäßigen Reihen hängt gegen Tock. Schließlich wird die IF -Aussage verwendet, um zu beurteilen, dass die ersten beiden Zeilen als Kanten angezeigt werden und die letzten beiden Zeilen mit dem Effekt gefüllt sind.
für (i = 0; i <4; i ++) {für (j = 0; j <3; j ++) {ctx.beginPath (); var x = 25+j*50; // x Koordinate var y = 25+i*50; // y Koordinate var radius = 20; // Bogenradius var startangle = 0; // Ausgangspunkt für Circle var endangle = math.pi+(math.pi*j)/2; // Endpunkt auf dem Kreis Var Antiklockwise = i%2 == 0? Falsch: wahr; // im Uhrzeigersinn oder gegen den Uhrzeigersinn ctx.arc (x, y, radius, startangle, endangle, gegen den lockz.); if (i> 1) {ctx.fill (); } else {ctx.stroke (); }}}Die nächste Art von Wegen sind Bézier -Kurven, die in der kubischen und quadratischen Sorte erhältlich sind. Diese werden im Allgemeinen verwendet, um komplexe organische Formen zu zeichnen.
Der nächste Weg zur Einführung ist die Bezier -Kurve, die sich in quadratischen und kubischen Formen befinden kann und im Allgemeinen zum Zeichnen von komplexen und regulären Formen verwendet wird.
Quadraticcurveto (CP1X, CP1Y, X, Y) // in Firefox 1.5 zerbrochen (siehe Arbeit unten) BezierCurveto (CP1X, CP1Y, CP2X, CP2Y, X, Y)Der Unterschied zwischen diesen kann am besten mit dem Bild rechts beschrieben werden. Eine quadratische Bézier -Kurve hat einen Start und einen Endpunkt (blaue Punkte) und nur einen Kontrollpunkt (rote Punkte), während eine kubische Bézier -Kurve zwei Kontrollpunkte verwendet.
Sehen Sie sich die Abbildung rechts für den Unterschied zwischen den beiden obigen Codezeilen an. Sie alle haben einen Ausgangspunkt und einen Endpunkt (blauer Punkt in der Abbildung), aber die quadratische Bezier -Kurve hat nur einen (roten) Kontrollpunkt) und die kubische Bezier -Kurve hat zwei.
Die X- und Y -Parameter in beiden Methoden sind die Koordinaten des Endpunkts. CP1X und CP1Y sind die Koordinaten des ersten Kontrollpunkts, und Cp2x und CP2Y sind die Koordinaten des zweiten Kontrollpunkts.
Die Parameter X und Y sind die Endpunktkoordinaten, CP1x und CP1Y sind die Koordinaten des ersten Kontrollpunkts, und CP2X und CP2Y sind die zweiten.
Die Verwendung von quadratischen und kubischen Bézier -Kurven kann sehr schwierig sein, da wir im Gegensatz zu Vektorzeichnungssoftware wie Adobe Illustrator kein direktes visuelles Feedback darüber haben, was wir tun. Dies macht es ziemlich schwierig, komplexe Formen zu zeichnen. Im folgenden Beispiel zeichnen wir einige einfache organische Formen, aber wenn Sie Zeit haben und vor allem die Geduld, können komplexere Formen erzeugt werden.
Die Verwendung quadratischer und kubischer Bezier -Kurven ist eine große Herausforderung, da es kein sofortiges visuelles Feedback wie im Vektorzeichnungssoftware Adobe Illustrator gibt. Weil es schwieriger ist, komplexe Grafiken zu zeichnen. Wenn Sie jedoch Zeit und vor allem haben, können Sie komplexe Grafiken zeichnen. Zeichnen wir unten eine einfache und reguläre Figur.
In diesen Beispielen gibt es nichts sehr schwierig. In beiden Fällen sehen wir eine Reihe von Kurven, die schließlich zu einer vollständigen Form führen.
Diese Beispiele sind relativ einfach. Alles, was wir zeichnen, sind vollständige Grafiken.
// quadratische Kurven examplex.beginPath (); ctx.moveto (75,25); ctx.quadraticcurveto (25,25,25,62,5); 120,30,125); ctx.quadraticcurveto (60,120,65,100);
Es ist möglich, eine quadratische Bézier -Kurve in eine kubische Bézier -Kurve umzuwandeln, indem beide kubischen Bézier -Kontrollpunkte aus dem einzelnen quadratischen Bézier -Steuerpunkt korrekt berechnet werden, obwohl das Gegenteil nicht wahr ist. Eine genaue Umwandlung einer kubischen Bézier -Kurve in eine quadratische Bézier -Kurve ist nur möglich, wenn der kubische Term Null ist. Häufiger wird eine Unterteilung Methode verwendet, um einen kubischen Bézier unter Verwendung mehrerer quadratischer Bézier -Kurven zu approximieren.
Durch die Berechnung können zwei Kontrollpunkte der entsprechenden kubischen Kurve aus einem einzelnen Kontrollpunkt der quadratischen Kurve abgeleitet werden, sodass es möglich ist, quadratisch in Kubikum zu verwandeln, aber ansonsten. Es ist möglich, nur dann in eine quadratische Bezier -Kurve zu konvertieren, wenn der kubische Term in einer Kubikgleichung Null ist. Im Allgemeinen können mehrere quadratische Kurven verwendet werden, um die Simulation kubischer Bezier -Kurven durch Unterteilungalgorithmen zu approximieren.
// Bezier Curves examplex.beginPath (); ctx.moveto (75,40); ctx.beziercurveto (75,37,70,25,50,25); , 102,75,120); ctx.beziercurveto (110,102,130,80,130,62,5);
Die Implementierung von QuadatricCurveto () gibt es einen Fehler in der Implementierung von Firefox 1.5. Es zeichnet keine quadratische Kurve, da es nur die gleiche Kubikkurvenfunktion beziercurveto () aufruft und den einzelnen quadratischen Kontrollpunkt (x, y) zweimal wiederholt. Aus diesem Grund liefert quadratische Curveto () falsche Ergebnisse. Wenn Sie die Verwendung von quadratischen Curveto () benötigen, müssen Sie Ihre quadratische Bézier -Kurve selbst in eine kubische Bézier -Kurve umwandeln, damit Sie die funktionierende Methode Beziercurveto () verwenden können.
In Firefox 1.5 ist die Implementierung von quadatriccurveto () fehlerhaft. Es zeichnet nicht direkt eine quadratische Kurve, sondern nennt BezierCurveto (), wobei beide Kontrollpunkte der einzelnen Kontrollpunkt der quadratischen Kurve sind. Daher zeichnet es falsche Kurven. Wenn Sie quadratischcurveto () verwenden müssen, müssen Sie die quadratische Kurve selbst in eine Kubikleistung umwandeln, damit Sie die Methode BezierCurveto () verwenden können.
var curr CurrentX, Currentyy; // auf letztes x gesetzt, y an lineto/moveto/beziercurveto oder quadratischcurvetofixed () Quadraticcurvetofixed (cpx, cpy, x, y) {/* für die Ausgleichsunterlagen unter den folgenden Variablennamen -Präfixen verwendet werden: qp0 {/* für den folgenden Variablennamen werden verwendet: qp0). lineto () oder Beziercurveto ()). QP1 ist der Quadatric Curve Control Point (dies ist der CPX, CPY, den Sie an quadratischCurveto () gesendet hätten). QP2 ist der quadratische Kurveendpunkt (dies sind die X-, Y -Argumente, die Sie an quadratischCurveto () gesendet hätten). Wir werden diese Punkte umwandeln, um die beiden benötigten kubischen Kontrollpunkte zu berechnen (die Start-/Endpunkte sind sowohl für die quadratischen als auch für die kubischen Kurven gleich. und y Terms für jeden Punkt separat a) Ersetzen Sie die QP0X- und QP0Y -Variablen durch CurrentX und Currentyy (die * Sie * für jeden Moveto/Lineto/BezierCurveto speichern müssen) die QP1x- und qp1y -Variablen ersetzen. wodurch uns: */ var cp1x = currentX + 2,0/ 3.0 *(cpx - currentX); var cp1y = currenty + 2.0/3.0*(cpy - currenty); var cp2x = cp1x + (x - currentX) /3.0; var cp2y = cp1y + (y - currenty) /3.0; // und nun nun kubic Bezer -Kurve aufrufen, um BezierCurveto (CP1X, CP1Y, CP2X, CP2Y, X, Y) zu funktionieren; currentX = x; Currenty = y;}Neben den drei Methoden, die wir oben gesehen haben, die rechteckige Formen direkt in die Leinwand zeichnen, haben wir auch ein Methode, das der Pfadliste einen rechteckigen Pfad hinzufügt.
Zusätzlich zu den drei oben genannten Methoden, die direkt Rechtecke zeichnen können, haben wir auch eine RECT -Methode zum Zeichnen von Rechteckpfaden.
rect (x, y, breite, Höhe)Diese Methode nimmt vier Argumente an. Die X- und Y -Parameter definieren die Koordinate der oberen linken Ecke des neuen rechteckigen Pfades. Breite und Höhe definieren die Breite und die Höhe des Rechtecks.
Es akzeptiert vier Parameter, x und y sind seine oberen linken Koordinaten, und Breite und Höhe sind ihre Breite und Höhe.
Wenn diese Methode ausgeführt wird, wird die MoveTo -Methode automatisch mit den Parametern (0,0) aufgerufen (dh sie setzt den Startpunkt auf den Standardstandort zurück).
Wenn es aufgerufen wird, wird die Moveto -Methode automatisch aufgerufen, sodass die Startkoordinate in den Ursprung wiederhergestellt wird.
In allen Beispielen auf dieser Seite habe ich nur eine Art von Pfadfunktion pro Form verwendet. Es gibt jedoch absolut keine Einschränkung für die Menge oder Art der Pfade, mit der Sie eine Form erstellen können. In diesem letzten Beispiel habe ich versucht, alle Pfadfunktionen zu kombinieren, um eine Reihe sehr berühmter Spielfiguren zu erstellen.
Die oben verwendeten Beispiele verwenden nur einen Pfadtyp. Natürlich begrenzt Canvas die Anzahl der verwendeten Pfadtypen nicht. Schauen wir uns also einen Pfad an.
Ich werde dieses komplette Skript nicht durchlaufen, aber die wichtigsten Dinge sind die Funktion und die Verwendung der Fillstyle -Eigenschaft. Es kann sehr nützlich sein und zeitsparend sein, um Ihre eigenen Funktionen zu definieren, um komplexere Formen zu zeichnen. In diesem Skript hätte ich doppelt so viele Codezeilen gebraucht wie jetzt.
Wir werden uns später in diesem Tutorial die Fillstyle -Eigenschaft ausführlicher ansehen. Hier verwende ich es, um die Füllfarbe von der Standardschwarz, zum Weiß und wieder zurück zu ändern.
Im gesamten Beispiel ist das bemerkenswerteste, was die RoundedRect -Funktion und die Einstellungen der Fillstyle -Eigenschaft verwendet. Benutzerdefinierte Funktionen sind sehr nützlich, um die Zeichnung komplexer Grafiken zu verkörpern. Die Verwendung einer benutzerdefinierten Funktion in diesem Beispiel speichert etwa die Hälfte des Codes.
In den folgenden Beispielen untersuchen wir die detaillierte Verwendung von Fillstyle-Attributen. Hier soll es verwendet werden, um die Füllfarbe zu ändern, vom Standardschwarz bis hin zu Weiß und dann zurück in Schwarz.
Zeigen Sie das Beispiel an
Funktion Draw () {var ctx = document.getElementById ('canvas'). getContext ('2d'); RoundedRect (CTX, 12,12,150,150,15); RoundedRect (CTX, 19,19.150,150,9); RoundedRect (CTX, 53,53,49,33,10); RoundedRect (CTX, 53.119,49,16,6); RoundedRect (CTX, 135,53,49,33,10); RoundedRect (CTX, 135.119,25,49,10); ctx.beginPath (); ctx.arc (37,37,13, math.pi/7, -math.pi/7, true); ctx.lineto (31,37); ctx.fill (); für (i = 0; i <8; i ++) {ctx.FillRect (51+i*16,35,4,4); } für (i = 0; i <6; i ++) {ctx.FillRect (115,51+i*16,4,4); } für (i = 0; i <8; i ++) {ctx.FillRect (51+i*16,99,4,4); } ctx.beginPath (); ctx.moveto (83,116); ctx.lineto (83,102); ctx.beziercurveto (83,94,89,88,97,88); ctx.beziercurveto (105,88,111,94,111,102); ctx.lineto (111,116); ctx.lineto (106.333,111.333); ctx.lineto (101.666,116); ctx.lineto (97.111.333); ctx.lineto (92,333,116); ctx.lineto (87.666,111.333); ctx.lineto (83,116); ctx.fill (); Ctx.FillStyle = White; ctx.beginPath (); ctx.moveto (91,96); ctx.beziercurveto (88,96,87,99,87,101); ctx.beziercurveto (87,103,88,106,91,106); ctx.beziercurveto (94,106,95,103,95,101); ctx.beziercurveto (95,99,94,96,91,96); ctx.moveto (103,96); ctx.beziercurveto (100,96,99,99,99,101); ctx.beziercurveto (99.103.100.106,103,106); ctx.beziercurveto (106.106,107,103,107,101); ctx.beziercurveto (107,99,106,96,103,96); ctx.fill (); ctx.FillStyle = schwarz; ctx.beginPath (); ctx.arc (101,102,2,0, math.pi*2, true); ctx.fill (); ctx.beginPath (); ctx.arc (89,102,2,0, math.pi*2, true); ctx.fill (); ctx.fill (); ctx.arc (89,102,2,0, math.pi*2, true); ctx.fill (); ctx.fill (); } function rundedDerect (ctx, x, y, breite, Höhe, Radius) {ctx.beginPath (); ctx.moveto (x, y+radius); ctx.lineto (x, y+hohe radius); ctx.quadraticcurveto (x, y+Höhe, x+radius, y+Höhe); ctx.lineto (x+width-radius, y+Höhe); ctx.quadraticcurveto (x+breite, y+Höhe, x+breit, y+hohe radius); ctx.lineto (x+width, y+radius); ctx.quadraticcurveto (x+width, y, x+width-radius, y); ctx.lineto (x+radius, y); ctx.quadraticcurveto (x, y, x, y+radius); ctx.stroke ();}