Werde kreativ mit der HTML5-Arbeitsfläche

1. Willkommen!: Willkommen beim HTML5 Canvas-Kurs, wo Sie von Anfänger gehen, um voll zuversichtlich Schöpfer in Grafiken und Animationen mit dem Canvas zu sein . Mein Name ist Chris, und ich bin hier, um Sie Schritt für Schritt durch diesen Prozess zu führen. Ich habe langjährige Erfahrung bei der Entwicklung von Websites und auch bei der Erstellung Online-Kursen mit Tausenden von Studenten und Hunderten von Fünf-Sterne-Bewertungen. Dieser Kurs wurde für einen Anfänger entwickelt, der Ihnen alles darüber beibringt , wie Sie mithilfe von JavaScript auf die Leinwand zeichnen können. Am Ende dieses Kurses haben Sie das Vertrauen und die Fähigkeit, fast alles, was Sie sich vorstellen können, zu zeichnen oder zu animieren und es auf Webseiten oder in einem Webbrowser anzuzeigen . Würde Sie Schritt für Schritt von den Canvas-Grundlagen bis hin zu fortgeschritteneren Techniken wie Transformationen, Animationen, Speichern und Installieren, und auch, wie Pixeldaten in Bildern zu manipulieren. Wir beginnen mit der Einrichtung des Canvas und stellen Ihnen grundlegende Skripte in Zeichnungstechniken vor. Wir werden einen Blick auf Linien und Puffs und wie man eine sehr Formen zu zeichnen. Ich werde Ihnen zeigen, wie Sie Text und Bilder zum Canvas hinzufügen, Abschnitte des Canvas entfernen und einige nette Effekte wie Farbverläufe, Muster und Schatten hinzufügen . Wenn Sie den Kurs durchlaufen, werden wir die Dinge noch weiter vorantreiben , indem wir uns fortgeschrittenere Techniken ansehen, verschiedene Arten von Kurven , Methoden speichern und wiederherstellen und Transformationen verwenden. Sie werden auch lernen, wie Sie Schleifen, Animationen verwenden und sogar, wie Sie die Pixeldaten von Bildern ändern können, um Effekte wie das Erstellen von Fotos Schwarz-Weiß hinzuzufügen. Wir beenden, indem wir Sie mit einer Herausforderung verlassen, lassen Sie uns Mickey Mouse Gesicht zeichnen. Lassen Sie uns Ihre neuen Fähigkeiten in die Praxis umsetzen. Der ideale Schüler dieses Kurses ist jemand, der Erfahrung im Webdesign oder in der Entwicklung und eine neue Form von Fähigkeiten erlernen möchte. Learning Canvas ist auch ideal für alle, die browserbasierte Spiele erstellen möchten. Ein wenig Erfahrung mit JavaScript-Grundlagen wäre ein Vorteil, wenn Sie sich durch diesen Kurs bewegen. Es gibt jedoch keine anderen Anforderungen, diesen Kurs zu nehmen, nur Bedürftigkeit zu lernen. Schauen Sie sich die Kursbeschreibung und auch die Leinwand der Vorlesung an, um alles zu entdecken, was Sie aus diesem Kurs lernen werden. Drücken Sie die Schaltfläche Diesen Kurs nehmen, und ich freue mich darauf, Sie innerhalb des Kurses zu sehen. 2. Was ist die HTML5-Arbeitsfläche?: Okay, Jungs. Zunächst einmal, bevor wir anfangen, etwas auf die Leinwand zu zeichnen, möchte ich nur ein oder zwei Momente nehmen, um einen kurzen Blick zu werfen, was wir mit HTML5 Canvas machen können und was genau die Canvas ist. Also im Grunde ist der Canvas ein HTML-Element. Genau wie viele der HTML-Tags, wie Absatz-Tags, haben wir ein öffnendes und ein schließendes Element. Im Gegensatz zum Bild-Tag ist es beispielsweise kein selbstschließendes Tag. Also brauchen wir nicht das öffnende Tag und dann das schließende Tag mit dem Schrägstrich. Es ist ein rechteckiger Bereich einer Webseite, die wir verwenden können, um zu zeichnen. Um uns das Zeichnen zu ermöglichen, verwenden wir eine Skriptsprache, die normalerweise JavaScripts ist, aber Skriptsprachen können verwendet werden. Aber für den Rest dieses Kurses werden wir JavaScript verwenden, da es die beliebteste Sprache ist, die mit dem Canvas verwendet wird. Wenn Sie Hilfe mit Tutorials oder Referenzen online benötigen, basieren so ziemlich alle auf JavaScript und schließlich wurde der Canvas in HTML5 hinzugefügt. Es ist also ziemlich neu, aber es wird ziemlich gut unterstützt. Werfen wir nun einen Blick auf ein oder zwei Dinge, die wir mit dem Canvas tun können. Wie wir bereits erwähnt haben, können wir die Canvas verwenden, um zu zeichnen. Wir können Dinge wie Rechtecke, Kreise, gerade Linien und Bögen zeichnen , und viele der verschiedenen Arten von Grafiken, die wir bekommen, wenn wir durch den Kurs Fortschritte. Wir können sogar Text auf die Leinwand zeichnen. Wir können einige einfache Text hinzufügen oder wir können verschiedene Schriftarten, verschiedene Farben. Wir können Farbverläufe hinzufügen und sogar diesen Text animieren. Die Leinwand kann auch verwendet werden, um Bilder und seine verschiedenen Bildmanipulationstechniken hinzuzufügen , die wir betrachten, wenn wir durch den Kurs fortschreiten. Wir werden auch einen Blick auf verschiedene Animationen zu verschiedenen Transformationen werfen, während wir durch den Kurs gehen. Es gibt viele coole Fakten, die Sie hinzufügen können, wie Rotationen und Sie können einige dieser Animationen anwenden, um tatsächlich Spiele zu erstellen. Viele Spiele sind in diesem Kurs nicht wirklich abgedeckt. Viele der Techniken, die wir verwenden, können dann auf Spiele angewendet werden, wenn das etwas ist, auf das Sie Fortschritte machen wollen. Schließlich können wir auch Muster, Farbverläufe und Schatten auf die Grafiken und den Text, um das wirklich gut aussehen zu lassen. Also habe ich vorher erwähnt, dass die Canvas eine Öffnung und ein schließendes Tag hat, und auch, dass die Canvas jetzt ziemlich gut gesichtet ist. Aber rüsten Sie sich einfach für unterstützte Browser aus. Zwischen diesen beiden Tags können wir einige Klartext hinzufügen. Lassen Sie den Benutzer einfach wissen, dass der Canvas in seinem Browser nicht unterstützt wird , und vielleicht Nachricht, nur um ihn zu bitten, auf einen neueren Browser zu aktualisieren. So können wir dies als Fallback-Fall auf unterstützte Browser verwenden. Wieder, wie viele über HTML-Elemente, können wir auch Attribute zum Canvas-öffnung-Tag hinzufügen. Viele von ihnen werden sehr vertraut aussehen, wenn Sie in der Vergangenheit ein wenig HTML gemacht haben. Dieses Beispiel hat eine ID, die wir während dieses Kurses verwenden werden, um die Canvas anzusprechen. Dieses Beispiel hat ein width und das height Attribut, um die Größe des Canvas festzulegen, die Sie verwenden möchten, und wir können auch ein style-Attribut hinzufügen, Dinge wie Hintergrundfarben und Rahmen hinzufügen. Schauen wir mal, was die HTML5 Canvas ist, einige Dinge, für die wir es verwenden können. Also, jetzt gehen wir zum nächsten Video über. Ich werde tatsächlich mit dem Einrichten des Canvas beginnen. 3. Grundlagen der Arbeitsfläche: Einrichtung: Ich möchte in diesem Video beginnen, indem ich einige grundlegende Canvas-Setup mache. Ich werde für dieses Video und für den Rest dieses Kurses in CodePen arbeiten, der von codepen.io erhältlich ist. Wie Sie sehen können, ist CodePen ein Spielplatz für das Front-End-Web. Grundsätzlich, was wir bei der Verwendung von CodePen tun können, ist, dass wir Online-Texteditor haben können, wo wir unseren Code verwenden können. Neben einem geteilten Bildschirm können wir auch ein Browserfenster haben, das die Ergebnisse unseres Codes anzeigt. Wir machen das in einem so genannten Stift. Ein Stift ist nur sein eigener, in sich geschlossener Bereich, wie wir eine Website mit einem Stift erstellen können. Ich werde auch Stifte für jeden Abschnitt dieses Kurses verwenden, nur damit alle verschiedenen Bereiche enthalten sind und Sie sie für zukünftige Referenz verwenden können. Natürlich, wenn Sie CodePen nicht verwenden möchten, können Sie einen Desktop-basierten Texteditor und auch einen Webbrowser verwenden, so zögern Sie nicht, diese Route zu tun, wenn Sie es bevorzugen. Aber für den Rest dieses Kurses werde ich CodePen verwenden. Wenn CodePen etwas ist, das Sie noch nicht verwendet haben, klicken Sie oben rechts auf die Schaltfläche „Registrieren“ und folgen Sie dann dem einfachen Anmeldeprozess, um ein Konto zu erstellen. CodePen kommt mit monatlichen Kosten, wenn Sie eines der Pro-Konten verwenden möchten. Alles, was Sie für den Rest dieses Kurses benötigen , ist, sich für einen der kostenlosen Pläne anzumelden. Gehen Sie voran und klicken Sie auf Anmelden für sie. Sie sollten den „Login“ -Button drücken. Ich werde mich nur in mein Konto einloggen und damit beginnen, die Leinwand einzurichten. Ich klicke auf „Neuer Stift“. Wenn Sie das erste Mal starten, wird dies der Bildschirm sein, den Sie sehen. Möglicherweise haben Sie ein etwas anderes Layout. Der weiße Pfeil, den Sie auf der rechten Seite sehen können, wird der Bereich sein, in dem wir die Ergebnisse unseres Codes sehen können. Effektiv wird es der Web-Browser sein. Ich habe einen HTML-Abschnitt, einen CSS-Abschnitt und einen JavaScript-Abschnitt. Für dieses Video werde ich mich nur im HTML-Sektion konzentrieren. Ich werde das einfach neu anordnen, nur um etwas mehr Platz da drin zu bekommen. Dann klicke ich einfach auf den Stift und nenn ihn dann „Einrichten der Leinwand“. Dann werde ich das speichern, um damit zu beginnen. Das erste, was ich im HTML-Abschnitt tun möchte, ist, ein grundlegendes HTML-Skelett zu erstellen. Das ist schön und einfach in CodePen zu tun. Wenn Sie htlm:5 eingeben. Wir können die ML-Befehle und die Registerkarte Hit verwenden, dann erstellt das eine HTML5-Skala Inferenz zu beginnen. Ich würde es direkt auf den Titel der Dokumente setzen. Ich werde es nur gleich nennen „Einrichten der Leinwand“. Nun, wir sind gut, in die Körperpartie zu gehen. Wir wissen aus dem letzten Video, dass die HTML5 Canvas die Canvas-Tags hat. Wir haben das öffnende Canvas-Tag, und wir haben auch das schließende Tag mit dem Schrägstrich. Beginnen Sie mit diesen beiden, dann lassen Sie uns einige Attribute innerhalb des Open-End-Canvas-Tags hinzufügen. Wir wissen, dass wir Grafiken mit dem Canvas mithilfe von Skripten zeichnen können. Ich werde erwähnen, dass wir JavaScript für den Rest des Kurses verwenden werden. Wir verknüpfen das Skript mit dem Canvas, indem wir auf die Canvas-ID verweisen, die Sie jetzt als Attribut festlegen. Geben Sie dem Canvas eine ID und Sie nennen es alles, was Sie wollen, aber ich werde es einfach „MyCanvas“ nennen. Wenn wir das speichern, werden wir auf der rechten Seite feststellen, dass tatsächlich kein Canvas auf dem Bildschirm gezeichnet ist. Dies liegt daran, dass die Canvas-Tags so wie sie sind, eigentlich nichts standardmäßig zeichnen. Nur damit wir unter dem Titel sehen können, werde ich nur etwas Styling hinzufügen. Dies ist nur Standard-CSS-Stile. Ich werde nur eine Farbe zum Hintergrund hinzufügen. Beginnen wir mit einem Tag im Canvas und fügen Sie dann einen Hintergrund hinzu. Ich werde meins rot machen. Da gehen wir hin. Das ist die Leinwand, die dort auf dem Bildschirm erscheint. Wir können sehen, dass es ein rotes Rechteck erscheint. Dies liegt daran, dass die Breite des Canvas standardmäßig 300 Pixel breit ist, wobei die Standardeinstellung 150 Pixel hoch ist. Natürlich können wir dies in den Attributen nicht ändern. Wir können eine Breite von 300 Pixeln hinzufügen und auch eine Höhe von 300 Pixeln hinzufügen. Jetzt können Sie sehen, dass wir einen schönen quadratischen Canvas zu Beginn haben, dann schließlich, für nicht unterstützte Browser, fügen wir den Fallback-Text hinzu, den wir im letzten Video angesehen haben. Wir beginnen mit der Nachricht Ihres Browsers, es unterstützt die HTML5 Canvas nicht. Bitte überlegen Sie, Ihren Browser zu aktualisieren oder zu ändern , um eine bessere Erfahrung zu erzielen Genau so. Sie können sehen, ob wir den Stift am Text speichern , der nur darin platziert wird, er erscheint nicht tatsächlich in der Leinwand auf der rechten Seite. Dies liegt daran, dass unsere Demonstrationsumgebung den Canvas vollständig erkennt, aber natürlich ist es eine gute Praxis, dies für Leute zu lassen , die keinen aktuellen Browser haben. Nun, wir haben die Grundlagen, wie man die Leinwand einrichtet, jetzt, gehen wir zum nächsten Video, wir werden einige Zeichnungen runter. 4. Grundlagen der Arbeitsfläche: Scripting und Rechtecke zeichnen: Jetzt haben wir die grundlegende Canvas-Setup auf dem Bildschirm. Wir werden nun mit dem Hinzufügen von Skripten fortfahren und tatsächlich einige Rechtecke auf die Leinwand zeichnen. Das erste, was wir tun wollen, ist, dass es eine kleine Fehlermeldung auf der Unterseite gibt. Ich werde zuerst beginnen, indem ich darauf klicke. Sie können sehen, dass CodePen keine Doctype-Deklaration benötigt, also werde ich das nur löschen, um diese Nachricht loszuwerden und dann zu speichern. Stellen Sie natürlich sicher, dass dies übrig bleibt, wenn Sie in einem Texteditor in einem separaten Webbrowser verwenden , oder wenn Sie die Bereitstellung im Web durchführen, stellen Sie sicher, dass das im Inneren aufbewahrt wird. Für dieses Video werde ich einen neuen Stift erstellen, und wir können entweder einen neuen Stift auf die gleiche Weise wie das letzte Video erstellen, oder wir können tatsächlich einfach auf die Gabel klicken eins. Dadurch werden Duplikate erstellt. Wir können diese Duplikate dann umbenennen, und dies erspart uns das ganze HTML-Skelett immer wieder einzugeben. Ich werde dieses Skript- und Zeichnungsrechtecke nennen, dasselbe im Titel hinzufügen und dort etwas mehr Platz schaffen. Das erste, was wir tun müssen, um auf das Scripting zugreifen zu können, ist die Skript-Tags zu erstellen. Also blasen Sie einfach die Leinwand, ich werde zu Admin, genau da. Öffnen Sie also die Skript-Tags, und dann brauchen wir ein schließendes Tag, und es ist genau wie mit Standard-JavaScripts. Wir haben JavaScript in der Vergangenheit verwendet, viele Dinge, die wir in diesem Kurs tun werden, werden ziemlich vertraut aussehen. Wenn nicht, mach dir keine Sorgen, du solltest in der Lage sein, dir gut zu folgen. Wir beginnen damit, die Leinwand nach der ID zu packen. Ich werde es in einer Variablen namens canvas speichern. Erstellen Sie also die Variable mit dem Namen der Leinwand, und ich werde die ID meiner Canvas erfassen, indem Sie die document.getElementById auswählen. Stellen Sie einfach sicher, dass die Elemente, by und ID ein paar weniger haben. Das Element, das wir packen werden, ist meine Leinwand. Also in Klammern, dann in den Anführungszeichen geben Sie MyCanvas ein, dann werden wir mit einem Semikolon enden. In diesem Abschnitt wird die Leinwand nach der ID erfasst und dann in einer Variablen namens canvas gespeichert. Ich werde eine weitere Variable namens ctx erstellen, das ist kurz für Kontext. Dies liegt daran, dass wir auf den Rendering-Kontext der Leinwand zugreifen werden, und dies ermöglicht es uns, tatsächlich auf die Leinwand zu zeichnen. Wir tun dies, indem wir die Canvases GetContext-Methode aufrufen. Innerhalb dieser Variablen werden wir die Leinwand auswählen, die erstellt wird, und dann Punkt, und dann rufen Sie GetContext, gefolgt von den Klammern, und ein Semikolon. In diesem Kurs konzentrieren wir uns auf 2D-Grafiken. Also innerhalb der Klammern als Parameter wir 2D innerhalb von dort hinzufügen, und dies wird angeben, dass wir einen zweidimensionalen Rendering-Kontext erstellen möchten. Ich werde während des Kurses viel eine CTX-Variable verwenden. Nun, da wir den Kontext oder die ctx Variable haben, können wir diese nun verwenden, um auf die Zeichnungseigenschaften zuzugreifen, indem wir sie verwenden. Ich werde die Stileigenschaften löschen, um es im letzten Video hinzuzufügen, und ich werde diese in verschiedenen Skripten hinzufügen. Schnappen Sie sich die ctx Variable, und dann werden wir die FillStyle-Methode mit einem großen S verwenden, und der Stil wird die Farbe sein, die wir setzen möchten. Dies ist eine CSS-Farbe, also möchte ich es rot nennen. Wir können den Namen der Farbe verwenden, oder wir können den x-Wert verwenden, oder Sie können sogar Verläufe oder Wortspiele verwenden, die wir später im Kurs betrachten werden. Lassen Sie uns tatsächlich diese Farbe verwenden, und füllen Sie Rechteck. Auch hier müssen wir den Kontext-Punkt und diesmal FillRect, das natürlich ein Rechteck ist, verwenden und diesmal FillRect, . Jetzt in den Klammern der FullRect Methode, werden wir in vier verschiedene Parameter hinzufügen. Ich werde nur 0, 0, 300, 300 hinzufügen. Die ersten beiden Parameter, die Null und Null, die Position, an der wir das Rechteck auf der Leinwand beginnen möchten. Also 0 x und 0 y, die ersten beiden Werte, ist die obere linke Ecke der Leinwand. Wir werden uns die Koordinaten im nächsten Video genauer ansehen, aber im Moment müssen wir nur wissen, dass die Position 0, 0, eine Koordinate zur oberen linken Ecke ist, und dann haben Sie wahrscheinlich schon erraten, dass die 300, 300, die Breite und die Höhe des Rechtecks. Wir haben ein Rechteck mit der gleichen Größe wie die Leinwand erstellt, und anstatt harte Koordinaten mit einem bestimmten Wert können wir auch JavaScript verwenden, um sie mit der gleichen Breite und der gleichen Höhe wie die Leinwand übereinstimmen zu lassen. Wir ändern dies zu Canvas, und das ist die canvas.width, und wir tun das gleiche mit Höhen. Also canvas.height, und dann sollten wir das Rechteck genau so aussehen, wie es vorher war. Jetzt werde ich nur noch ein oder zwei weitere Rechtecke oder Quadrate erstellen , nur um mit zu spielen. Wir werden den Kontext greifen, und wieder, greifen Sie die FillStyle-Methode. Ich möchte diese Zeit als Hexagon-Wert festlegen, also benutze den Hashtag, und ich werde 00ff99 verwenden. Dieser Stil tut eigentlich nichts, bis wir tatsächlich ein Rechteck erstellen. Also CTX.fillRect. Genau wie zuvor beginnen wir das in der oberen linken Ecke. Also 0, 0, und dieses Mal wollen wir es die Hälfte der Breite und die Hälfte der Höhe der Leinwand machen . Mit JavaScript können wir das wieder tun. Anstatt Leinwand, die Breite, die wir im letzten Beispiel erhalten haben, werden wir canvas.width über zwei verwenden, und dann das gleiche für die Höhen, canvas.height über zwei, oder geteilt durch zwei. Das sollte hier oben in der linken oberen Ecke ein schönes Quadrat bilden, das die Hälfte des Gewichts und die Hälfte der Höhe der ursprünglichen Leinwand ist. Lassen Sie uns noch eine hinzufügen, nur in einer etwas anderen Position. Lassen Sie uns Stil wieder füllen, diesmal mit einer anderen Farbe. Ich werde cc99ff wählen und dann Rechteck füllen. Dieses Mal wollen wir es auf 150 Pixel setzen, und dies ist die Ausgangsposition in der Mitte des Quadrats, weil es die Hälfte der Breite und die Hälfte der Höhe der Leinwand ist. Ich werde es die gleiche Größe wie zuvor machen, also teilen Sie die Leinwandbreite durch zwei, canvas.height dividieren durch zwei, weil wir schöne Pfannen haben, die im Browser zusammengeführt werden. Dies ist in Ordnung, wenn Sie das Rechteck tatsächlich füllen möchten , wie wir es mit einer bestimmten Farbe getan haben, aber wenn Sie einmal nur ein Rechteck zeichnen das nur den Umriss ohne Füllfarbe zeigt, können wir dies tun, indem Sie die StrokeRect-Methode. Lassen Sie uns wieder mit ctx beginnen, und dann verwenden wir StrokeRect. Lassen Sie uns die Außenseite oder den Umriss eines Rechtecks zeichnen. Also machen Sie diese Zeit Position 25, 25, und das wird es eine schöne einfache 100 mal 100 Quadrat. Dort können wir sehen, dass wir das Rechteck oder die Quadrate umrissen haben. Natürlich ist der einzige Unterschied zwischen dem Zeichnen eines Quadrats oder eines Rechtecks mit FullRect und StrokeRect, es ist einfach die Breite und die Höhe, die wir in der Klammer angeben. So könnten wir dies leicht ändern, um ein wenig breiter zu sein, und dann das Quadrat in ein Rechteck verwandeln. Das war's. Ich hoffe, Sie haben Ihren ersten Vorgeschmack beim Scripting mit der Leinwand genossen und wie man Rechtecke und Quadrate zeichnet. Fühlen Sie sich frei, ein wenig zu spielen, um damit, und ich werde Sie im nächsten Video sehen. 5. Grundlagen der Arbeitsfläche: So verstehst du die Koordinaten: Im letzten Video werden wir einige Rechtecke und einige Quadrate auf die Leinwand zeichnen. Sie wurden in einige grundlegende Canvas-Koordinaten eingeführt. Wir wollen jetzt nur noch ein paar Augenblicke nehmen, um die Canvas-Koordinaten genauer zu betrachten. verstehen, wie die Koordinaten funktionieren, wird Ihnen wirklich helfen, wenn Sie diesen Kurs durchlaufen. Wissen Sie bereits, dass 0,0 die obere linke Ecke des Canvas ist. Wenn wir uns vorstellen, dass dieses Raster die Leinwand ist und jedes kleine Quadrat im Raster enthalten ist ein Pixel. Da wir den 2D-Kontext verwenden, haben wir sowohl die X- als auch die Y-Achse. Die X-Achse verläuft horizontal über den Canvas, während das y vertikal verläuft. Wir haben die Position 0, 0 in der oberen linken Ecke, dargestellt durch den kleinen Punkt. Wenn der x-Wert erhöht wird, laufen wir horizontal über den Canvas. Wenn wir über vier Pixel gehen, ist dies die Startpunkte des Quadrats, so dass x gleich vier ist. Denn die Startpunkte des Quadrats sind nur ein Pixel von oben. Dadurch wird der y-Wert gleich eins. Es ist genau das gleiche, wie wir uns im letzten Video angeschaut haben, wo wir die 0, 0 Position des ersten Rechtecks einstellen. Dann legen wir das zweite Rechteck oder das zweite Quadrat so fest, dass es in der Mitte des Canvas beginnt , um ein Quadrat in der unteren rechten Ecke zu erstellen. Wir haben die x- und y-Position auf 150 x 150 gesetzt, was genau auf halbem Weg in der Mitte des Canvas lag. der Lage zu sein, Ihre Hand um diese Koordinaten von einem frühen Stadium zu bekommen , wird Ihnen wirklich helfen, während Sie durch den Kurs Fortschritte. Es ist wirklich wert zu wissen, dass vor allem die Y-Achse in der traditionellen Geometrie und in verschiedenen Branchen, ein positiver y-Wert, tatsächlich zunehmen würde. Während im Canvas alle positiven Werte für y vertikal den Canvas hinunter gehen. Wenn Sie von einem bestimmten Hintergrund kommen, in dem die Koordinaten auf eine andere Weise ausgeführt werden, seien Sie vorsichtig. Ich hoffe, das macht Sinn. Jetzt werden wir weitere Zeichnungen erstellen. 6. Grundlagen der Arbeitsfläche: Linien und Pfade: In diesem Video werden wir einen Blick auf die Linien und Pfade werfen, die wir mit der HTML-Leinwand tun können. Beginnen wir mit der Fork im letzten Video, und ich werde den Namen ändern, um einfach Linien und Pfade zu sein, sie sind die gleichen mit dem Titel. Dann werden wir alles zwischen Skript-Tags löschen, außer den ersten beiden Variablen, die wir erstellt haben. Wir werden diese in all den Videos brauchen, die wir tun, wir können sie so lassen, wie sie sind. Beginnen wir mit einem einfachen Beispiel, wie man einige Linien zeichnet, und wir werden das tun, indem wir ein Quadrat erstellen, indem wir die vier Seiten einzeln zeichnen. Lassen Sie uns wieder mit dem Kontext arbeiten, also ctx.. Wir werden mit der BeginPath-Methode beginnen, und wir müssen nur die Klammern leer lassen, dies gibt nur den Anfang eines neuen Pfades an . Bevor wir nun anfangen zu zeichnen, kurz bevor wir anfangen, das Quadrat hinzuzufügen, werde ich nur einen Rahmen hinzufügen, damit wir den Canvas-Umriss sehen können. Lassen Sie uns den Stil so einstellen, dass er gleich dem Rahmen ist, und lassen Sie uns es 2 Pixel machen, damit wir es auf einer durchgezogenen Linie sehen können. Lassen Sie uns unsere Leinwand zurück, zurück zu Ihnen BeginPath und dann CTX.MoveTo. Das wird unsere Ausgangsposition sein, aus der wir unsere Linie ziehen wollen. Ich möchte den Stift auf 10 Pixel auf der X-Achse und auch 10 Pixel in oder 10 Pixel unten auf der Y-Achse einstellen . Dies wird den Stift effektiv zu irgendwo hier bewegen, und das wird unsere Ausgangsposition sein. Um dann tatsächlich eine Linie zu zeichnen, verwenden wir Ctx.LineTo, und dann müssen wir unsere beiden Koordinaten hinzufügen, zwischen denen wir die Linie ziehen wollen. Die erste, die wir hinzufügen werden, ist die x-Achse von 290 und die y-Achse von 10. Sie bemerken, dass noch nichts auf dem Bildschirm erschienen ist, dies liegt daran, um dies tatsächlich in der gleichen Weise wie das Rechteck-Video zu zeichnen , wo wir Strich und Füllung verwenden mussten, müssen wir das gleiche für die Linie tun. Ctx.strok, dies wird den Umriss streicheln. Die Linie beginnt an Position x-10, y-10, wir wählen 10 Pixel in, und dann werden wir 290 bewegen oder zu Position 290 bewegen , die hier ist und auch die 10 Pixel Position auf der Y-Achse behalten. Lassen Sie uns jetzt mit einer zweiten Zeile 2 CTX.LineTo fortfahren. Wir wollen den Stift bei 290 halten, lassen Sie ihn dort behalten, aber wir wollen ihn auf die Y-Achse runter auf 290 fallen lassen. Ich werde eine gerade vertikale Linie bekommen, und hoffentlich können Sie einen Musterrand sehen, CTX.LineTo. Jetzt müssen wir zurück zur ersten x-Position gehen, die 10 war, und die y-Achse bei 290 halten. Die dritte Zeile, beenden wir das, indem wir zurück zu Position 10, 10 gehen. Dies ist unser Ausgangspunkt und dann schaffen wir ein komplettes Quadrat. Die Rückkehr der Linie zu den ursprünglichen Koordinaten ist eine Möglichkeit, das Quadrat zu vervollständigen, es gibt einen viel einfacheren Weg, dies zu tun. Lassen Sie uns diese Zeile mit zwei Schrägstrichen auskommentieren, diese Zeile wird nicht rot sein. Stattdessen, da wir die BeginPath-Methode am Anfang verwenden, können wir einen Pfad einschließen, indem wir Ctx.closePath verwenden. Dann kehrt diese nun wieder in die ursprüngliche Ausgangsposition zurück und vervollständigt das Quadrat. So zeichnen wir ein Quadrat mit Strich. Wenn Sie möchten, dass die Quadrate eine Farbfüllung haben, können wir ctx ändern, um zu füllen, und dann erhalten wir die Farbe mit dem Standard-Schwarz gefüllt. Wir können die Standardfarbe ändern, um alles, was wir wollen, indem Sie die Füllstil-Methode verwenden, wie wir für die Rechtecke verwendet. Lassen Sie uns weitermachen, indem wir einige neue Formen zeichnen, zeichnen wir ein Dreieck. Beginnen wir mit dem Erstellen eines neuen Pfades. Ich beginne den Pfad des Dreiecks und bewege dann den Stift in die Ausgangsposition. Um dies innerhalb des Quadrats um 10 weitere Pixel haben wir die Startposition diesmal auf 20, 20 gesetzt, und lassen Sie uns die ersten Zeilen erstellen, CTX.LineTo. Damit die erste Zeile für den Anfang des Dreiecks über die Spitze geht, müssen wir die Position 10 Pixel für jedes Kreuz machen. Dies war 300 für den Umriss der Leinwand, 290 für den Rand des Platzes. Lassen Sie uns 10 weitere Pixel einbringen und diese 280 machen, und die Y-Position kann bei 20 bleiben. Um dies zu einem gleichen Dreieck zu machen, müssen wir es nach unten auf Position 20 auf der x-Achse bewegen, und einen Y-Wert, um es gleich 280 zu machen was im Grunde das Gegenteil zu diesem CTX.LineTo ist, der X-Wert von 20, der Y-Wert von 280. Um dann wieder nach oben zurückzukehren, lassen Sie uns einfach den Pfad schließen, indem Sie Ctx.closePath verwenden, und dann, um dies erscheinen zu lassen, fügen wir ctx.fill hinzu. Wir sehen nicht wirklich, dass das Dreieck auf der Leinwand angezeigt wird. Dies liegt daran, dass die Standard-Füllfarbe, die wir zuvor erwähnt haben, auch schwarz ist, was in der gleichen Farbe wie das Quadrat verschmilzt. Bevor wir es füllen, können wir einen FillStyle hinzufügen, und lassen Sie uns die Farbe auf Sechseckwert von 99ccff setzen. Wir können sehen, wie das Dreieck auf dem Hintergrund hervorsteht. Fügen wir ein weiteres Dreieck hinzu, aber dieses Mal fügen wir einen Strich statt eine Füllung hinzu. Ich werde nur dieses Dreieck kopieren und einfach das unten hinzufügen. Natürlich anstelle von ctx.fill verwenden wir stroke. Lassen Sie uns den FillStyle in rot ändern, nur damit wir auf dem blauen Hintergrund sehen können. Lassen Sie uns es vom ersten Dreieck versetzen, lassen Sie uns es auf Startposition von 40, 40 setzen. Alle 20er Jahre können auf 40 geändert werden, und um es gleich zu machen, werden wir 280 zu 230 ändern und sollten ein schönes gleichmäßiges Dreieck machen. In der Tat möchte dies StrokeStyle sein, weil Sie einen Strich anstelle einer Füllung verwenden. Das ist also unsere rote Farbe für den Umriss. Kurz bevor wir dieses Video beenden, möchte ich Ihnen nur ein paar verschiedene Methoden für Linienstriche zeigen, sie sind setLineDash und getLineDash. Um die SetLineDash zu verwenden, können wir dies zum letzten Dreieck hinzufügen. Ich werde es nur vor den Zeilen hinzufügen, die ich tatsächlich gezeichnet habe, lassen Sie uns dies einfach unter BeginPath hinzufügen. Wir werden die Kontextvariable wieder verwenden, also ctx, das ist setLineDash. Achten Sie darauf, Großbuchstaben für jedes Wort außer dem ersten zu verwenden. Dann müssen wir einige Werte in der Klammer hinzufügen, wir müssen tatsächlich ein Array hinzufügen. Wir werden sie mit den eckigen Klammern benutzen, die eckigen Klammern einfach so öffnen. Um mit einem einfachen LineDash zu beginnen, füge ich zwei verschiedene Werte hinzu, 10 füge 10 hinzu. Das macht einen einfachen LineDash, der 10 Pixel breit ist. Welches wird durch den ersten Wert und dann eine Lücke von 10 Pixel zwischen jeder der Linien festgelegt . Wenn Sie möchten, dass diese Zeilen weiter auseinander liegen, können wir den zweiten Wert einfach so ändern. Diese Werte werden nur durchlaufen, bis sie das Ende der Zeile erreicht. Wir können mehr als zwei Werte hinzufügen, können wir eine ungerade Zahl hinzufügen. Wenn wir dies auf 10, 20, 30 ändern , schleifen die drei Werte einfach bis zum Ende der Zeile. Werfen wir einen Blick auf die Linienstriche. Wir können sehen, ob wir hier anfangen, es gibt eine erste Zeile von 10 Pixeln, eine Lücke von 20 Pixeln, dann eine dritte Zeile von 30 Pixeln. Dann zurück zum Anfang, wir haben eine Lücke von 10, eine Linie von 20 und eine Lücke von 30, es sind 10, 20 , 30 wieder, und so weiter bis zum Anfang. Schließlich möchte ich Ihnen nur schnell GetLineDash zeigen. GetLineDash ist etwas, für das Sie vielleicht nie verwenden können, aber ich zeige Ihnen, wie Sie es verwenden, nur für den Fall. Unter dem SetLineDash werde ich eine neue Variable erstellen, und diese Variable wird in den Details des LineDash beginnen. Ich werde es nur etwas Relevantes wie LineDashPattern nennen, und dann, wenn ich dies auf Kontext setze. und die Methode, die wir anstelle von SetLineDash verwenden müssen, ist GetLineDash. Ich beginne in dieser Variablen, öffne die Konsole und mache ein Konsolenprotokoll, console.log und dann ist die Sache, die wir protokollieren möchten, diese Variable. Lassen Sie uns das im Inneren hinzufügen, und dann werde ich die Konsole öffnen, die nur unten dort ist , klicken Sie darauf. Es gibt unser Array der Rückgabewerte für den LineDash. Wir haben 10, 20, 30, und dann wird es wiederholt. Wieder, das ist etwas, das Sie vielleicht nie brauchen, aber es ist da, nur für den Fall, dass Sie es brauchen. Danke, und wir sehen uns im nächsten Video. 7. Grundlagen der Arbeitsfläche: Linienbreite und Pixel-Anpassung: Willkommen zurück. In diesem Video zeige ich Ihnen, wie Sie die Breite der Linie oder die Linienstärke ändern . Ich werde auch einen Blick auf das wichtige Konzept von viel in Pixel werfen. Um zu beginnen, werden wir nur das letzte Video, das Linien und Pfade war, verzweigen . Dann, wenn das fertig ist, ändern wir den Namen. Zeilenbreiten & Matching zu Pixeln, ich werde das nur kopieren und das in den Titel einfügen, genau so. Dann könnten wir einige der unnötigen Teile des Skripts entfernen, die wir nicht brauchen. Für dieses Video brauchen wir das ursprüngliche Quadrat nicht, also lösche ich den ersten Abschnitt. Wir können auch das erste Dreieck entfernen. Wir verlassen das dritte Dreieck, aber wir werden nur die Linienstriche entfernen. Entfernen Sie also die eingestellte Linie, die gestrichelte Linie, die Variable und auch das Konsolenprotokoll. Dann sind wir gut zu gehen. Speichern Sie das. Wir sollten nur mit einem Umriss des roten Dreiecks bleiben. Es hat die Breite einer Strichlinie geändert, es ist ziemlich einfach zu tun. Wir müssen ctx verwenden, die Methode, die wir verwenden, ist LineWidth. Ich werde einen Wert festlegen, sagen wir zu einem Anfangswert von eins und sehen, was passiert. Wir bekommen keine Unterschiede, also lasst uns versuchen, dies auf 10 zu erhöhen und sehen, was passiert. Wir bekommen auch eine viel größere Linie, oder eine viel breitere Linie, als wir zuvor hatten. Wir machen es noch sichtbarer, also lasst uns auf 26. Das ist so ziemlich, alles, was wir tun müssen, um die Breite der Linie zu ändern. So unkompliziert ist es wirklich. Aber ein weiteres wichtiges Konzept, das ein wenig kniffliger zu erfassen ist, ist viel in Pixel. Manchmal machen wir nicht viel zu Pixeln richtig, wir können mit verschwommenen Linien enden. Nur um Ihnen ein Beispiel zu zeigen, werde ich dieses Dreieck kopieren, das wir gerade verwendet haben, und dann in ein zweites Dreieck einfügen. Aber dieses Mal werden wir die LineWidth ändern, um einen ungeraden Wert von 25 zu sein. Nur um das Dreieck zu versetzen, damit wir den Unterschied sehen können, ändern Sie alle 40er auf 80s und alle Werte von 230 auf 270. Dann speichern Sie das. Jetzt müssen wir Dreiecke versetzen. Einer hat eine Breite von 26 Pixeln, und einer ist 25. Nur um Ihnen zu zeigen, was ich meine, ich werde nur vergrößern, im Browser, und ich hoffe, Sie können das zu Hause sehen. Wenn nicht, sollte es ein bisschen leichter auf Ihrem eigenen Computer zu sehen sein. Das zweite Dreieck, das wir gerade erstellt haben, hat einen verschwommenen Umriss. Der erste, den wir gezeichnet haben, hat einen scharfen, gestochen scharfen Umriss. Werfen wir einen Blick darauf, warum das so ist. Um Ihnen zu helfen, genau zu verstehen, warum dies geschieht, möchte ich einen Blick auf die beiden Beispiele werfen. Die erste auf der linken Seite, ist ein einfaches Canvas-Raster, mit einer grünen Linie, die grüne Linie ist ein Pixel breit. Dieser wird auf der X-Achse mit sieben Pixeln gezeichnet. Die rote Linie zeigt den Mittelpunkt der Linie an. Ausgehend von Null, wenn wir über sieben Pixel gehen, wurden direkt in die Mitte der grünen Linie genommen, die wir gezeichnet haben. Da die grüne Linie nur ein Pixel breit ist, zeichnet die Leinwand sie ein halbes Pixel nach links und dann ein halbes Pixel nach rechts. Wie Sie sehen können, füllt dies kein ganzes Pixel, wenn wir uns die quadratischen Gitter auf dem Hintergrund ansehen. Was dann passiert, ist, dass die Leinwand dann zeichnet oder füllt, der Rest des Pixels mit einem Teilschatten. Dies ist der unscharfe Effekt, den Sie im vorherigen Beispiel sehen können. Alles, was wir tun müssen, um die Linie viel das Pixel zu machen, ist ein Blick auf das Beispiel auf der rechten Seite. Anstatt die Ausgangsposition auf sieben zu sein, ändern wir sie auf 6,5. Vertikal ist die Mittellinie auf halbem Weg zwischen Pixel, und dies bewirkt dann, dass die Linienbreite die volle Größe des Pixels einnimmt, und daher ist keine zusätzliche Schattierung wie dieses Beispiel erforderlich. Daher haben wir scharfe Linien, keine verschwommene Wirkung auf die Außenseite. So etwas, das ich wollte, dass ihr denkt und euch bewusst seid, wenn ihr Linien oder Formen auf der Leinwand zeichnet. Danke und tschüss vorerst. 8. Grundlagen der Arbeitsfläche: Ecken und Winkel: In diesem Video dreht sich alles um Ecken und Gehrungen. Lassen Sie uns einen neuen Stift für dieses Video erstellen, indem Sie [unhörbar] das letzte Video. Dann wie üblich, ändern Sie einfach den Titel in Ecken und Gehrungen und das gleiche innerhalb des HTML-Titel. Lassen Sie uns etwas mehr Platz schaffen. Dann werde ich für dieses Beispiel nur das erste Dreieck aus dem letzten Video verlassen und dann das zweite loswerden. Da gehen wir hin. Das Dreieck, das wir auf dem Bildschirm haben, hat scharfe Ecken. Wir können dies ändern, indem wir verschiedene Eigenschaften verwenden. Wir können abgerundete Ecken an abgeschrägten Ecken hinzufügen, sowie diese Gehrungsecken, die Sie standardmäßig sehen können. Der Weg, dies zu tun, ist die Verwendung von Context.LineJoin, und dann können wir den Typ der Verbindung, die wir für jede der Ecken verwenden möchten. Der erste, den ich hinzufügen werde, ist rund, und dann speichern Sie das. Wir können sehen, dass die Kanten an den freien Ecken des Dreiecks jetzt eine viel weichere abgerundete Kante haben. Wir können auch die abgerundeten Ecken zu einer Abschrägung ändern. Dies fügt jeder der drei Seiten viel mehr von einem quadratischen Off-Effekt hinzu. Die dritte Eigenschaft, die wir hinzufügen können, ist die Gehrung, und die Gehrung ist die Standardwerte, mit denen wir begonnen haben. Dies wird eigentlich keine Änderungen vom ursprünglichen Dreieck vornehmen, wir sind nur mit den drei scharfen Ecken links. Wenn der Gehrungseffekt das ist, wonach Sie suchen, müssen Sie diese Zeile überhaupt nicht als Standardwert hinzufügen. Das sind drei Stile, die Sie zu Ecken hinzufügen können. Als nächstes möchte ich Ihnen zeigen, wie Sie LineCap verwenden. LineCap ist eine Technik, die Sie verwenden können, um den Stil der Enden der Linie zu ändern. Um dies zu demonstrieren, werde ich nur die letzten beiden Zeilen des Dreiecks entfernen. Machen Sie das einfach zu einer geraden Linie. Dann können wir LineJoin ändern, um LineCap zu sein. Die Standardeinstellung ist der Hintern und dies sind nur die quadratischen Kanten, die wir auf einer Standardlinie sehen. Es ist Quadrate von jedem der Enden und der Standardstil, wenn nichts anderes angegeben ist. Wir können diese auch so ändern, dass sie rund sind, genau wie bei dem Dreiecks-Beispiel, das wir uns gerade angesehen haben. Wir haben eine schöne abgerundete Ecke an jedem der Enden der Linie. Nun, das letzte ist das Quadrat. ein Quadrat verwenden, bemerken Sie vielleicht keinen großen Unterschied und sieht tatsächlich ziemlich ähnlich dem Hintern, den wir gerade angesehen haben, was die Standardeinstellung ist. Wenn Sie das Quadrat verwenden, macht es die Linie jedoch etwas länger da an jedem Ende der Zeile ein Quadrat hinzugefügt wird. Das Quadrat erstreckt sich über die Hälfte der Breite der Linie, so dass es an jedem Ende etwas länger macht. Es ist nur ein subtiler Unterschied, aber es lohnt sich, zu berücksichtigen, wenn Sie die Kontrolle über die Länge der Linie haben müssen. So verwenden Sie LineJoin und auch LineCap. Die dritte und letzte Technik, die wir in diesem Video anschauen wollen, ist, wie man das MiterLimit benutzt. Werfen wir einen kleinen Blick auf einige Folien, um ein besseres Verständnis zu bekommen. Ich habe eine Skizze erstellt, um Ihnen ein besseres Verständnis des MiterLimit zu geben, bevor wir tatsächlich in irgendeinen Code gelangen. Vor Ihnen befinden sich zwei verschiedene Ecken mit unterschiedlichen Winkeln. Wie Sie sehen können, erzeugen diese verschiedenen Winkel eine andere Länge der Gehrung. Von den Innenpunkten bis zu den äußeren Punkten ist die Länge in diesem Beispiel viel breiter als links. Wir können tatsächlich die Kontrolle über die Länge dieser Gehrung haben, indem wir das MiterLimit verwenden. Wir können die Länge der Gehrung steuern, wenn wir wollen, indem wir MiterLimit verwenden. Wenn die Länge der Gehrung länger ist als das miterLimit, das wir festgelegt haben, die Ecke, wie Sie im rechten Beispiel sehen können, wird die Ecke, wie Sie im rechten Beispiel sehen können,dann abgeschrägt oder effektiv abgeschnitten. Wir können dies nutzen, um die Kontrolle über die Länge unserer Gehrungen zu erlangen. Lass uns zurück zu CodePen gehen und das in die Praxis umsetzen. Für dieses Beispiel müssen wir nur eine weitere Zeile hinzufügen. Machen Sie dies einfach in eine Ecke, also erstellen Sie eine LineTo. Ich werde das 30 100 machen. Ich sollte die herumspielen, um eine schöne Ecke zu bekommen. Ich werde die 250 und 70 machen. Ich ändere einfach die x und y für den Stift auf 30 und 30 zu bewegen. Nun, lassen Sie uns die Linienbreite nur ein wenig kleiner machen, ändern Sie sie auf 10. Wir können den vollen Winkel oder die ganze Ecke jetzt auf dem Bildschirm sehen. Wir brauchen die LineCap aus dem vorherigen Beispiel auch nicht. Okay, das erste, was wir tun müssen, ist, den LineJoin auf den Typ der Gehrung zu setzen. Lassen Sie uns das jetzt hier hinzufügen. LineJoin gleich Gehrung, dann können wir das MiterLimit direkt unten hinzufügen. Wir werden nur mit dem Wert von 10 beginnen. 10 ist eigentlich der Standardwert. Sie werden keinen Unterschied bemerken, indem Sie dies auf 10 setzen. Wir haben eine lange scharfe Kante drauf, haben eine scharfe Ecke. Lassen Sie uns einfach versuchen, das auf fünf zu reduzieren und sehen, was passiert. Der Wert von 5 ist niedriger als die Länge der Ecke, so dass es sich nun um ein abgeschrägtes Ende handelt. Wir können dies verwenden, um die Schärfe einer Ecke einzuschränken. So können wir Ecken und Gehrungen mit der Leinwand verwenden. Wir gehen jetzt zum nächsten Video über, wo wir einen Blick auf Bögen und Kreise werfen. 9. Grundlagen der Arbeitsfläche: Bogen und Kreise: gehen von den Ecken und Gehrungen aus dem letzten Video, wir werden jetzt einen Blick auf Bögen und Kreise werfen. Lassen Sie uns einen neuen CodePen dafür erstellen. Also gabeln Sie das letzte Video, dann lassen Sie uns einen Titel von Bögen und Kreisen erstellen. Ich werde das ganze Skript außer der Leinwand und den Kontextvariablen lesen, also beginnen wir neu darin. Bevor wir anfangen, Code zu schreiben, werfen wir einen Blick auf einige Folien, um ein besseres Verständnis der Verwendung von arc zu bekommen. Dies ist die Arc-Methode und es nimmt verschiedene Parameter. Zu Beginn haben wir die X und Y Eigenschaften und diese sind Mittelpunkt des Bogens. Also direkt in der Mitte des Bogens oder des Kreises, den wir schaffen wollen. Die dritte Eigenschaft ist der Radius, so dass der Radius der Abstand vom Mittelpunkt zur Außenseite des Kreises ist . Dann haben wir den Startwinkel und den Endwinkel. Wir müssen verstehen, dass Bogen Bogenmaß anstelle von Grad verwendet. Also nur horizontal oder die X-Achse, dies ist die Startposition oder Null. Dies ist effektiv um drei Uhr. Dann ein Viertel um den Weg herum, dies wird 0,5 mal pi sein. Auf halbem Weg wäre ein Mal pi, 1.5 und dann zwei mal pi wäre eine volle Rotation oder ein voller Kreis. Der letzte Parameter ist, wo der Bogen im Uhrzeigersinn oder gegen den Uhrzeigersinn gezeichnet werden soll. Dies ist ein boolescher Wert, der entweder auf true oder false gesetzt ist. Standardmäßig ist es auf im Uhrzeigersinn eingestellt. Wenn wir das auf wahr setzen, könnten wir das dann gegen den Uhrzeigersinn ändern. In diesem Beispiel wäre der Startwinkel Null. Wir würden wollen, dass es gegen den Uhrzeigersinn den ganzen Weg auf 0,5 mal pi für den Endwinkel geht. Wenn Sie herausfinden möchten, welche Bogenmaß in Bezug auf Grad sind, gibt es einige Taschenrechner online, also geben Sie das einfach ein schnelles Google und Sie werden in der Lage sein, zu finden, was Sie brauchen. Gehen wir nun zurück zu CodePen und werfen einen Blick auf einige Beispiele. Beginnen wir mit dem Erstellen unseres ersten Bogens. Ich werde einen Weg beginnen, mit dem ich anfangen muss. Dann lassen Sie uns den Bogen erstellen, also ctx.arc. Wir fügen die Parameter innerhalb der Klammern hinzu, genau wie wir uns in den Folien zuvor angesehen haben. Die ersten beiden Werte sind der Mittelpunkt des Bogens. Ich werde mein inneres Zentrum der Leinwand machen. Also 150,150 dann der Radius werde ich meine 80 machen. Die Ausgangsposition, meins wird auf Null gesetzt werden. Dann der Endwinkel, werde ich meins mal math.pi machen. Die Startposition von Null ist in der Drei-Uhr-Position vorbei. Wir haben die Zielposition einmalig math.pi, die an der neun Uhr Position vorbei ist. Um dies zu zeichnen, müssen wir nur den Strich oder die Füllung hinzufügen. Also ctx. Schlaganfall, nur um uns den Umriss zu geben, so dass wir da sind, weil dies standardmäßig im Uhrzeigersinn ist. Es läuft im Uhrzeigersinn herum. Wenn wir wollen, dass dies anders ist, können wir es ändern, um wahr zu sein. Dann bekommen wir den Bogen, der sich gegen den Uhrzeigersinn dreht. Wir können auch den Abschnitt des Bogens füllen, indem Sie ctx.fill verwenden. Es gibt ein Standard-Schwarz, das wir in früheren Videos gesehen haben. Natürlich können wir den Füllstil ändern, wenn das etwas ist, was Sie tun möchten. Wenn wir den vollen Kreis erstellen wollen, wie wir uns zuvor angesehen haben, müssen wir nur den Endwinkel ändern, um zweimal pi zu sein und das schafft einen vollen Kreis. Ich versuche, es vorerst wieder zu ändern. Als nächstes werde ich einen Blick auf ArcTo und ArcTo kann ein wenig schwieriger zu verstehen sein. Werfen wir einen Blick auf ein gutes Beispiel, das ich online gefunden. Dies ist unter rgraph.net verfügbar. Wenn Sie nach rgraph und auch nach der ArcTo-Funktion suchen, sollten Sie in der Lage sein, dieses interaktive Beispiel zu finden. Um ArcTo zu verstehen, müssen wir uns bewusst sein, dass es mehr als nur einen Start- und Endwinkel gibt. Wir beginnen mit dem P0 , der sich in der unteren linken Ecke befindet. Wir können das bewegen, wenn wir wollen. Wir beginnen mit der Einstellung P0, die die Startposition ist, indem Sie MoveTo verwenden. Wir legen dann den Wert von P1 fest, ein Punkt ist, an dem sich diese beiden Linien treffen. P2 ist dann die Endposition. Dann verwenden wir LineTo, um mit der Linie vertikal zum Endpunkt fortzusetzen. Dies ist ein großartiges Beispiel, weil wir jeden dieser Punkte verschieben können und wir ein besseres Verständnis dafür bekommen, wie alles funktioniert. Gehen wir zurück zu CodePen und erstellen Sie ein Beispiel für uns selbst. Immer noch innerhalb der Skript-Tags, werden wir einen neuen Pfad erstellen. Lasst uns den Pfad beginnen. Direkt unterhalb des letzten Beispiels. In der Tat werden wir ein wenig mehr Platz zum Spielen schaffen, also lassen Sie uns die Breite auf 600 machen , nur damit wir beide auf drücken können. Wir werden puffen. Dann ist das erste, was wir tun müssen, einen Ausgangspunkt zu erstellen, so CTX.MoveTo. Die Position, an der wir beginnen werden, ist X, 300 und dann Y, 150, also erstellen Sie einen Ausgangspunkt , der effektiv P0 ist. Dann werde ich die Linie mit einer LineTo fortsetzen. Der Punkt, den ich die LineTo setzen möchte, ist 400.150. Fügen wir den Strich hinzu, damit wir die Linien sehen können, während wir sie zeichnen. Es gibt unsere Ausgangsposition. Jetzt bewegen wir die Linie über 100 Pixel. Wir haben LineTo. Lassen Sie uns dann die ArcTo -Methode erstellen. Lassen Sie uns die Koordinaten erstellen, die für P1 ist, die gerade hier oben ist. Ich werde meins auf 500,150 setzen, so dass dies dann die imaginäre P1-Position schafft. Dann, weil wir wollen, dass die Linie rund und auf der Y-Achse nach unten bewegt wird, werden wir sie 500 machen, dann fallen auf 300 und dann auf einen Radius von 75. Um dann die Linie bis zur Zielposition zu verlängern, die 500.300 ist, dann verlängern Sie einfach die Linie mit einer LineTo von 500.300 und da ist unser ArcTo abgeschlossen. Nur um zusammenzufassen, wir sind auf Position 300.150 umgezogen, die hier ist. Wir haben dann eine Linie erstellt, 100 Pixel [unhörbar], über die eine Linie horizontal verlaufen. Wir haben dann das ArcTo erstellt, so dass der erste Wert von 500.150 die imaginäre P1-Position ist, die hier ist. Da wir also wollen, dass der Bogen dann rund kurve wird, werden wir dann den Y-Wert auf 300 und 500.300 ist die Endposition, die hier unten ist. Anschließend haben wir die Linie so erweitert, dass sie gerade bis zur Endposition ist, wodurch der volle Bogen entsteht. Ich hoffe, das ergibt Sinn. Spielen Sie wahrscheinlich mit den Werten herum und sehen Sie, was Sie erstellen können. Machen Sie auch ein wenig mit dem interaktiven Beispiel herumspielen. So können wir der Leinwand Bögen und Kreise hinzufügen. Wenn Sie im nächsten Video zurückkommen, werfen wir einen Blick auf Zeichentext. 10. Grundlagen der Arbeitsfläche: So fügst du Text ein: In diesem Video gehen wir davon aus, tatsächlich Formen und Linien zu zeichnen, und ich werde Ihnen zeigen, wie Sie Text zur Leinwand hinzufügen und wie Sie verschiedene Stile und Effekte hinzufügen können, um Ihren Text wirklich hervorzuheben. Ich habe das letzte Video kopiert und einen Textcode-Stift erstellt und dann den Skriptabschnitt gelöscht und die Zeichenfläche und die Kontextvariablen verlassen. Die Möglichkeit, Text zur Leinwand hinzuzufügen, besteht darin, FillText und auch StrokeText zu verwenden, und Sie sollten in der Lage sein, zu erraten, was diese beiden aus früheren Videos machen. Der StrokeText zeichnet den Umriss, und FillText zeichnet den Text mit einer Farbfüllung. Wir werden damit beginnen, FillText zu verwenden. Also ctx.fillText, und dann die Klammern danach. Die erste Eigenschaft, die wir hinzufügen müssen, ist der Text, den wir anzeigen möchten. Ich werde nur einen Text zum Hinzufügen von Canvas-Text hinzufügen. Dann die Startkoordinaten von 0, 0. Wir stellen fest, dass wir, wenn wir die Leinwand auf der rechten Seite betrachten, keinen der Texte sehen können, die wir gerade gezeichnet haben. Dies liegt daran, dass sich die Textkoordinaten von 0, 0 tatsächlich unten links im Text befinden. Um es nach unten zu verschieben, so dass wir es auf dem Bildschirm sehen können, werden wir den y-Wert auf 50 ändern. Jetzt können wir sehen, dass es dort auf dem Bildschirm erscheint. Um es ein wenig größer zu machen, können wir einige Schriftarten hinzufügen, ctx.font. Lassen Sie uns die Schriftart auf 50 Pixel setzen, um sie größer zu machen, und auch die Schriftart Helvetica. Um dies zum Laufen zu bringen, müssen wir dies nur kurz vor dem FillText platzieren, und das sollte den Text jetzt größer machen. Da gehen wir. Das ist jetzt viel größer, und wir haben die Schrift geändert. Die Standardgröße beträgt 10 Pixel und es handelt sich um eine serifenlose Schrift. Nun, geben wir ihm ein bisschen Farbe. Lassen Sie uns einen FillStyle, Ctx.fillStyle hinzufügen. Um es einfach zu machen, werde ich nur einen Farbnamen lila hinzufügen. Dann lassen Sie uns den Text in die Mitte der Leinwand schieben, indem Sie TextAlign verwenden. Ich setze das in die Mitte. Okay, das ist nicht genau das, wonach wir suchen. Wenn der Text in der Mitte der Leinwand angezeigt werden soll, müssen wir die Ausgangsposition in der FillText-Methode ändern. Derzeit zentriert sich der Text über die Nullkoordinaten, die hier drüben sind. Lasst uns das in die Mitte der Leinwand schieben. Wir werden canvas.width über 2 hinzufügen. Der Text wird auf halbem Weg über die Arbeitsfläche verwiesen. Lassen Sie uns dasselbe für diesen Wert tun, ändern Sie 50 in Canvas-Höhe geteilt durch 2, und das ist die Grundlinie des Textes, der sich über die Mitte der Leinwand befindet. Ok. Als nächstes werden wir einen Blick auf die Text-Baseline nehmen. Bevor wir uns das ansehen, möchte ich nur eine Linie direkt über die Mitte der Leinwand zeichnen, und Sie werden sehen, warum in einem Moment. Lassen Sie uns schnell eine Linie erstellen. Bewegen Sie sich auf 0 Leinwand.Höhe geteilt durch 2. Lasst uns die Linie zeichnen. Die Linie wird die Breite der Leinwand sein, und dann wird die y-Position canvas.height dividieren durch 2. Zeichnen wir die Linie mit dem Strich. Okay, jetzt haben wir eine Linie, die über die Mitte der Leinwand erscheint, und Sie werden sehen, warum in einem Moment. Ich werde den Text nur ganz nach unten verschieben. Lassen Sie uns anfangen, mit der Textgrundlinie zu spielen. Darunter werde ich nur Ctx.textBaseline hinzufügen. Wie es derzeit steht, haben wir den Text auch schön auf der Linie mit den Schwänzen, die unterhalb der imaginären Linie hängen. Lassen Sie uns dies ändern, indem Sie die TextBaseline so ändern, dass sie unten ist, und lassen Sie uns sehen, was passiert. Das schiebt den Text effektiv nach oben. Jeder einzelne Buchstabe oder jeder Teil eines jeden Buchstabens ruht nun auf der Grundlinie. Es gibt einige verschiedene Optionen, die wir uns die Baseline ansehen müssen, wir können auch top verwenden, und dies schiebt alles unter die Basislinie. Wir können auch Mitte verwenden, und dies fügt die Grundlinie durch die Mitte des Textes zu sein. Es gibt auch Alphabetiker. Dies bringt uns zurück an den Anfang, da dies der Standardwert ist. Der letzte, den ich dir zeigen werde, hängt. Durch die Verwendung von Hängen sieht es tatsächlich ein bisschen wie bei der Verwendung von oben aus. Es gibt jedoch keine Lücke zwischen der Oberseite der Buchstaben und der Grundlinie. Sie hängen effektiv nur von der Grundlinie ab. Wenn Sie die FillText-Methode verwenden, gibt es tatsächlich einen weiteren Parameter, den wir hinzufügen können, und dies ist ein optionaler Wert. Damit wird die maximale Breite festgelegt, die wir verwenden können, um den Text auf eine bestimmte Größe zu beschränken. Als Beispiel werde ich den Text nur auf 200 Pixel beschränken. Sie können sehen, dass zerquetscht den Text nach oben. Ändern wir es auf 300, das macht es ein bisschen breiter. Das ist nützlich, wenn wir die Grenzen des Textes innerhalb eines bestimmten Containers behalten möchten. Natürlich, genau wie bei der Verwendung aller Formen in früheren Videos, anstatt Füllung zu verwenden, können wir dies als Strich oder Strichtext ändern. Dann erhalten wir nur den Umriss des Textes und nicht eine einfarbige Füllfarbe. So können wir der Leinwand Text hinzufügen, und wie wir Styling zu unserem Text hinzufügen können. Nun gehen wir zum nächsten Video über. Wir werden einen Blick auf das Entfernen von Abschnitten der Leinwand werfen. 11. Grundlagen der Arbeitsfläche: So entfernst du Sektionen der Arbeitsfläche: Willkommen zurück, Jungs. Dieses Video wird als Entfernen von Abschnitten der Leinwand bezeichnet. Ich werde einen Blick auf ein paar verschiedene Methoden zu beiden Vertuschabschnitten des Canvas werfen und auch die Pixel, die auf bestimmte Bereiche der Leinwand gezeichnet wurden, vollständig entfernen . Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie einen Bereich des Canvas zuschneiden , um die Zeichnung auf eine bestimmte Form zu beschränken. Ich habe vorangegangen und das letzte Video verzweigt und den Titel so eingestellt , dass Abschnitte der Leinwand entfernt werden. Ich werde jetzt alle Skripte wie gewohnt entfernen , außer dem Canvas und den Kontextvariablen. Dann schließlich werde ich den Stil im Hintergrund ändern, und lassen Sie uns das auf rot setzen. Du wirst in einem Augenblick sehen, warum. Mit dem, was wir bereits wissen, können wir den Effekt der Entfernung von Abschnitten der Leinwand erzeugen, indem Sie einfach eine Form wie ein Rechteck mit einer Hintergrundfarbe wie Weiß hinzufügen. Lasst uns das jetzt machen. Stellen Sie zunächst den Füllstil des Rechtecks ein, und ich werde das weiß machen. Dann lassen Sie uns das Rechteck selbst mit FillRect erstellen. Ich werde meine in der oberen linken Ecke erstellen. Also null für die Ausgangsposition, eine Breite von der Hälfte der Leinwand, die 300 ist, und dann möchte ich die Höhe auf die Hälfte der Leinwand wieder einstellen, von 150. Dann erhalten wir ein weißes Rechteck in der oberen Ecke, das der Illusion gibt, dass ein Teil der Leinwand entfernt wurde. Dies deckt jedoch nur das Objekt ab, das gezeichnet wird , anstatt tatsächlich irgendwelche Pixel zu entfernen. Wenn wir tatsächlich irgendwelche Pixel innerhalb eines bestimmten Bereichs entfernen wollten , der bereits gezeichnet wurde, können wir dies mit der ClearRect Methode tun, und dies entfernt tatsächlich alle Pixel innerhalb eines bestimmten Bereichs. Werfen wir einen Blick auf das. Wenn wir Teil des Rechtecks entfernen wollten, das wir gerade gezeichnet haben, könnten wir Ctx.clearRect verwenden, und die Parameter funktionieren auf die gleiche Weise wie das FillRect. Wir beginnen mit der Position, mit der wir beginnen wollen, die in meinem Fall Null ist. Ich werde nur ein 100 mal 100 Quadrat zu entfernen erstellen, das Sie sehen können, es ist nur etwa die obere Ecke. Dadurch wurden die Pixel entfernt, die innerhalb dieses 100 x 100 Abschnitts gezeichnet wurden. Natürlich, wenn Sie den gesamten Canvas löschen möchten, können Sie einfach canvas.width und auch canvas.height hinzufügen. Dadurch wird der gesamte Bereich des Canvas ausgewählt und alle Pixel gelöscht, die darauf gezeichnet wurden. Ich setze nur einen Befehl vor das, nur um unser weißes Dreieck zurück zu bekommen. Die letzte Methode, die ich Ihnen zeigen möchte, ist Clip. Wenn Sie jemals eine Zuschneidemaske in Fotobearbeitungssoftware wie Photoshop verwendet haben, funktioniert Clip mit denselben Effekten. Wir deklarieren einen Abschnitt, den wir schneiden möchten, wie ein Rechteck oder einen Kreis dann alles andere, was wir auf der Leinwand zeichnen , wird nur innerhalb dieses gezeichneten Bereichs sichtbar sein. Alles andere außerhalb dieses Bereichs wird nicht sichtbar sein. Werfen wir einen Blick auf ein Beispiel. Ich werde nur noch ein Rechteck zeichnen. Dieses Mal werde ich ein weißes Rechteck in der unteren rechten Ecke erstellen. Ich werde die Ausgangsposition so einstellen, dass sie in der Mitte der Leinwand ist, also sind das 300, 150. Dann genau das gleiche für die Größe 300 von 150. Um diesen Clip zu erstellen, zeichne ich zuerst einen Kreis in der Mitte des Canvas. Wir können einen Kreis verwenden, um den Bereich zu sein, auf den wir die Zeichnung beschränken möchten. Fügen wir einen Kreis oder einen Bogen hinzu. Wir wissen, wie man das macht. Wir können ctx.arc verwenden. Die Ausgangsposition befindet sich in der Mitte. Die Canvas-Breite geteilt durch zwei. Das Gleiche für die Höhen. Der Radius von 150. Um dann einen vollen Kreis zu zeichnen, beginnen wir mit der Null als Ausgangsposition und dann zweimal Math.pi. Dann zeichnen wir es mit dem Strich. Nun, da ist unser Kreis, der die volle Höhe der Leinwand ist. Wenn wir nun die gesamte Zeichnung so einschränken wollen, dass sie innerhalb des Kreises ist, können wir diesen Bereich abschneiden. Wir haben ctx.clip. Nun sind alle Rechtecke und alle Objekte, die gezeichnet wurden, nur innerhalb dieses Kreises oder dieses Bereichs sichtbar, den wir geschaffen haben. Alles, was außerhalb des Kreises übrig bleibt, ist einfach die Hintergrundfarbe des Canvas. So können wir Abschnitte aus dem Canvas entfernen. Wir schauten uns an, wie man bestimmte Bereiche verdeckt, wir haben uns angesehen, wie man Pixel aus dem Canvas entfernt, und schließlich haben wir uns die Clip-Methode angesehen, um die gesamte Zeichnung auf einen bestimmten Bereich zu beschränken, wie zum Beispiel den Kreis, den wir gezeichnet haben. Wir lassen dieses Video dort, und wir sehen uns im nächsten Video, wo wir einen Blick auf Steigungen werfen. 12. Grundlagen der Arbeitsfläche: Farbverläufe: Willkommen zurück Jungs. In diesem Video werden wir einen Blick auf die Verwendung von Farbverläufen innerhalb der Leinwand werfen. Insbesondere werden wir einen Blick auf zwei verschiedene Arten werfen. Wir werden einen Blick auf lineare und radiale Verläufe werfen. Zunächst habe ich einen neuen Stift mit dem Titel Farbverläufe erstellt. Ich werde das Canvas-Skript entfernen, das wir nicht brauchen. Alle Abschnitte unter den beiden Variablen können entfernt werden. Ich werde den Stil-Hintergrund als rot belassen, das ist in Ordnung. Beginnen wir nur mit einem Kommentar, nur von linearen Farbverläufen. Wir werden mit der Create linearen Gradienten Methode beginnen. Also Ctx.CreateLinearGradient, und wie üblich, seien Sie vorsichtig mit den Großbuchstaben für linear auf Gradienten. In den Klammern müssen wir also die Start- und Endposition angeben. Also werde ich einen Farbverlauf von einer Ecke der Leinwand erstellen, direkt über in einer geraden Linie zur anderen. Dies wird verwendet werden, um von einer Farbe zu einer anderen zu mischen, oder sogar mit so vielen Farben, wie Sie möchten. Also werde ich die Ausgangsposition so einstellen, dass sie oben links ist, was 0, 0 ist, und dann die Zielposition unten rechts ist. Lassen Sie uns das also mit canvas.width und canvas.height beschneiden. Als nächstes werde ich diese Zeile in eine Variable hinzufügen. So variabel werde ich meins linear nennen, weil es ein linearer Farbverlauf ist. Lass es uns da drin aufbewahren. Wir können dann diese Variable verwenden, um Farbstopps hinzuzufügen, was die Farbe ist, die wir an verschiedenen Positionen oder verschiedenen Stufen des Farbverlaufs hinzufügen möchten . Also lassen Sie uns die Variable von Linear.addColorStop hinzufügen. Also innerhalb der Add Color Stop-Methode werde ich zwei Parameter hinzufügen. Der erste ist also ein Wert zwischen Null und Eins. Dies ist die Position des Farbverlaufs, auf die die Farbe angewendet werden soll. Also Null ist der Anfang des Gradienten, und eins ist das Ende. Also werde ich die Startfarbe auf grün setzen, und dann werde ich zwei weitere hinzufügen. Also Linear.addColorStop. Diesmal gehen wir zum Zyklus von Orange. Ich möchte, dass das auf halbem Weg über den Farbverlauf liegt. Also werde ich es auf 0,5 setzen und Farbe orange sein. Dann setzen wir eine weitere auf genau die gleiche Weise ein. Aber dieses Mal am Ende des Gradienten, die Position eins ist, und dann die Farbe, möchte ich meins auf rot setzen. Also sind wir fast da, jetzt nur noch ein paar Zeilen, um diesen Gradienten zum Laufen zu bringen. Als nächstes werden wir den FillStyle setzen , den Sie zuvor gesehen haben, Ctx.fillStyle. Bis jetzt haben wir in diesem Kurs eine bestimmte Farbe wie Weiß, Rot oder Schwarz festgelegt , die wir auf den FillStyle anwenden möchten. Aber dieses Mal können wir den Farbverlauf anwenden, indem wir die lineare Variable hinzufügen, die wir gerade erstellt haben. Dann müssen wir schließlich die Rechtecke erstellen, auch den Farbverlauf hinzufügen. Also lassen Sie uns einfach eine FillRect Methode verwenden. Ich werde dieses Rechteck so erstellen, dass es die gleiche Größe wie die Leinwand hat. Also 0, 0, 600, 300, und speichern Sie das, und da haben wir es. Da ist unser linearer Gradienten. Also beginnen wir den Anfang, der Position Null ist. Wir beginnen mit einer grünen Farbe, und dann auf halbem Weg mischen wir uns zu Orange. Dann enden wir schließlich an der roten Farbe, die auf Position eins gesetzt ist, die die allerletzte Position des Gradienten ist, der gerade hier ist. Ich habe das Rechteck erstellt, um auch den linearen Farbverlauf hinzuzufügen. Also habe ich am Anfang dieses Videos erwähnt, wir werden einen Blick auf zwei verschiedene Arten von Farbverläufen werfen. Der erste ist also linear, und dann der nächste, den wir uns ansehen werden, ist der radiale Farbverlauf. Der Unterschied zwischen einem linearen Farbverlauf funktioniert also zwischen zwei Punkten über eine gerade Linie, während ein radialer Farbverlauf kreisförmig ist und eine Mischung zwischen zwei imaginären Kreisen ist, die wir angeben. Lassen Sie uns also einen Blick auf den radialen Farbverlauf werfen. Genau wie wir es für das erste Beispiel getan haben, werde ich eine Variable erstellen, diese in speichern. Diesmal werde ich es radial nennen. Setzen Sie das also gleich Ctx.CreateRadialGradient. Die Parameter, die wir hinzufügen müssen, unterscheiden sich also vom linearen Farbverlauf. Anstatt einen Start- und Endpunkt zu haben, müssen wir zwei imaginäre Kreise definieren. Ein Wesen, das beginnt und das andere ein Endekreis ist. Also, um zu beginnen, werde ich die beiden Kreise an den gleichen Startkoordinaten erstellen. Dann erstellen wir den Verlaufseffekt, indem wir den Radius des zweiten Kreises vergrößern. Also lassen Sie uns die sechs Parameter hinzufügen. Die ersten drei Parameter sind für den Anfangskreis. Also werde ich dies in der Mitte der Leinwand erstellen, die 300, 150 ist. Der dritte Wert ist der Radius des Anfangskreises. Also werde ich das auf zehn setzen. Dann machen wir das Gleiche für den zweiten Kreis. Also wieder, in der Mitte der Leinwand von 300, 150. Aber dieses Mal machen wir den Radius auf 150. Dann wie im linearen Beispiel können wir die radiale Variable verwenden, um die Farbstopps hinzuzufügen. Sie können jede Farbe hinzufügen, die Sie drinnen mögen. Ich werde meins nur das gleiche halten wie das letzte Beispiel. In der Tat kopiere ich einfach diese beiden Zeilen und ändere die Variable in radial. Legen Sie dann den FillStyle fest, und dies ist radial. Dann wie zuvor werden wir auch FillRect verwenden. Ich werde es so einstellen, dass es die volle Größe der Leinwand hat. Also 0, 0, 600, 300. Jetzt haben wir den radialen Farbverlauf auf dem Bildschirm angezeigt. So erstellen wir den ersten imaginären Kreis mit dem Radius von 10. Dies ist der kleinere innere Kreis, der die Startfarbe Grün hat. Wenn wir uns dann nach außen zum größten Kreis bewegen , der Radius von 150 hat, ist dies der Endpunkt, an dem wir rot mischen, das ist die Außenseite des Kreises. So wird dieser Effekt erreicht, indem zwei Kreise platziert werden, beide auf den gleichen Startkoordinaten von 300, 150. Natürlich können wir mit diesen herumspielen und einen Offset erstellen. Wenn wir also zum Beispiel die x-Position des Starterkreises auf 200 ändern, wird der grüne Abschnitt so verschoben, dass er weit nach links ist. Wir können damit herumspielen und ein paar nette Effekte bekommen. Also lassen Sie uns das wieder ändern, und wir können auch die Position des Endkreises ändern. Also werde ich das auch zu 200 ändern. Dies versetzt auch den zweiten Kreis nach links und gibt uns dort einen anderen Effekt. Also haben Sie ein Spiel um mit diesen Werten und sehen, was Sie erstellen können. Wenn Sie dann bereit sind, mit dem nächsten Video fortzufahren, werfen wir einen Blick auf das Hinzufügen von Bildern zur Leinwand. Wir sehen uns dort. 13. Grundlagen der Leinwand: So fügst du Bilder auf der Arbeitsfläche hinzu: Wir machen eine kleine Pause vom Zeichnen auf die Leinwand. Ich werde einen Blick darauf werfen, wie wir tatsächlich Bilder zur Leinwand hinzufügen können und wie wir mit ihnen arbeiten können. Ich habe einen neuen Stift erstellt und den Namen Hinzufügen von Bildern zur Leinwand erstellt. Gehen Sie weiter und erstellen Sie eine, wenn Sie dies noch nicht getan haben. Um zu beginnen, werde ich den Stil ändern, also lassen Sie uns einfach die Hintergrundfarbe entfernen, weil wir das nicht brauchen. Dann werde ich nur noch den Rahmen von zwei Pixeln und einer durchgezogenen Linie hinzufügen. Dann lassen Sie uns den linearen und den radialen Farbverlauf loswerden. Jetzt sind wir mit einer leeren Leinwand mit dem Rand links. Beginnen wir mit dem Hinzufügen von Bildelementen zur Leinwand und lassen Sie uns dies in einer Variablen namens Image speichern. Variablenbild ist gleich einem neuen Bild. Dann können wir die Quelle des Bildes mit image.src festlegen, und dann fügen wir den Pfad zu dem Bild hinzu, das Sie hinzufügen möchten. Um ein Bild zu schnappen, gehe ich zu Wikipedia. Ich gehe zu wikipedia.org. Werfen Sie einen Blick auf ein Bild, mit dem Sie arbeiten möchten. Das sieht aus wie ein schönes Bild, also lasst uns einfach darauf klicken. Wenn Sie dann mit der rechten Maustaste klicken oder Steuerelement klicken, können wir dann auf „Bild-Adresse kopieren“ und diese dann in die Bildquelle einfügen. Um dies anzuzeigen, müssen wir die Zeichenbildmethode verwenden, so CTX.DrawImage. Dann müssen wir in den Klammern zuerst das Bild hinzufügen, das Sie hinzufügen möchten. Wir haben es in der Bildvariablen gespeichert, und dann ist es an der Ausgangsposition, also die x und y von 0, 0. Dadurch sollte das Bild in der oberen linken Ecke angezeigt werden. Wie Sie sehen können, ist das Bild viel größer als die Leinwand. Es ist viel weiter gestreckt, als wir sehen können. Dies ist einfach zu beheben. Alles, was wir tun müssen, ist die Größe des Bildes festzulegen. Ich werde dies auf die gleiche Größe wie die Leinwand mit canvas.width einstellen, dann lass uns die Höhe auf canvas.height setzen und das speichern. So können wir der Leinwand ein Bild hinzufügen. Wir sind nicht jedes Mal auf andere neue Bilder beschränkt. Wir können tatsächlich ein Bild verwenden, das bereits hinzugefügt wurde, nicht nur zur Leinwand, sondern zu jedem Teil einer Webseite. So können wir entweder das vollständige Bild oder einen Abschnitt des Bildes greifen. Um dies zu tun, werde ich nur diese Bildquelle kopieren, und dann lassen Sie uns das Bild löschen, das wir gerade hinzugefügt haben. Ich werde dieses Bild als HTML-Element hinzufügen, so dass die Bildquelle gleich ist, und fügen Sie dann den Link ein so dass die Bildquelle gleich ist, , den wir gerade kopiert haben. Sie können sehen, dass das Bild unter der Leinwand erschienen ist. Das ist gut. Ich werde nur eine ID hinzufügen, damit wir das mit Scripting nur von MyImage verwenden können. Ich werde das benutzen, um das Bild bald zu schnappen. Dann nur um die Höhe zu beschränken, damit wir ein wenig besser auf der Seite sehen können, lassen Sie uns dies auf 300 setzen und dann das Bild-Tag schließen. Wir haben ein vorhandenes Bild, das von der Leinwand erscheint. Wir möchten das vollständige Bild oder einen bestimmten Abschnitt greifen. Die Art und Weise, das zu tun. Wenn wir zurück zu den Skript-Tags gehen und dann können wir dieses Bild durch seine ID greifen. Lassen Sie uns das Bild noch einmal in einer Bildvariablen speichern. Das Bild ist gleich Dokumenten, und lassen Sie uns es durch seine ID mit getElementById greifen. Die ID, die wir greifen möchten, ist mein Bild, also fügen Sie das einfach innerhalb von dort hinzu, und dann können wir das Bild mit CTX.DrawImage auf die Leinwand neu zeichnen . Was willst du zeichnen? Nun, es ist diese Variable namens Image, also lassen Sie uns das in hinzufügen. Dann ist die Position, zu der wir es hinzufügen möchten, 0, 0. Das Bild wird nicht auf der Arbeitsfläche angezeigt. Dies liegt daran, dass wir versuchen, das Bild zu beschneiden, bevor es tatsächlich mit dem Laden fertig ist. Um dies zu überwinden, können wir eine onload-Funktion hinzufügen. Dies bedeutet, dass unser Canvas-Code erst dann ausgeführt wird , wenn das Dokument geladen wurde. Dies schließt alle Bilder und alle Skripte ein. Lassen Sie uns das gesamte aktuelle Skript innerhalb der onload-Funktion umgeben, also window.onload. Sobald der Browser geladen ist, lösen wir eine Funktion aus. Lassen Sie uns die geschweiften Klammern öffnen, aber umgeben Sie den gesamten vorhandenen Code innerhalb des Skripts zwischen diesen geschweiften Klammern. Lasst uns das einfach einrücken und das speichern. Jetzt ist das Bild auf der Leinwand erschienen, wie etwas zu beachten, weil manchmal Sie versuchen, ein Bild oder etwas von einer Webseite zu greifen , bevor es tatsächlich geladen wird, und dann, wenn nichts passiert, wir manchmal denken, dass es ein Problem mit dem Code gibt. Während alles, was wir tun müssen, ist zu warten, bis das Fenster oder der Browser das Laden des Skripts oder des Bildes beendet hat, und dann können wir damit beginnen. Das letzte, was ich Ihnen zeigen möchte, ist, wie man ein Bild zuschneidet oder schneidet. Wir können dies auch tun, indem die gleiche Zeichenbildmethode verwenden, die Sie nur nehmen und betrachten. Der einzige Unterschied ist, dass es viel mehr Parameter einnimmt. Werfen wir einen Blick auf eine Folie, um herauszufinden, wie man das benutzt. Auf der linken Seite befindet sich das Quellbild. Dies ist das Originalbild, es ist in voller Größe. Der erste Parameter ist einfach das Bild, das wir greifen möchten. Wir haben dann eine x- und y-Position, die der Startpunkt in der oberen linken Ecke des Bereichs ist , den wir beschneiden wollen. Wir legen dann die Breite und die Höhe des Bereichs des Bildes fest, den wir zuschneiden möchten. Dann haben wir auf der rechten Seite die letzten vier Parameter, die alle auf die Leinwand beziehen und wie wir auf die Leinwand platzieren möchten. Wir beginnen mit der x- und y-Position. Sie möchten auch das zugeschnittene Bild zeichnen. Auch hier ist dies die obere linke Ecke des Bildes in Bezug auf die Canvas-Koordinaten von 0, 0. Dann haben wir schließlich die Breite und die Höhe des zugeschnittenen Bildes. Dies ist die Größe, die das Bild hat, wenn es wieder auf die Leinwand platziert wird. Lass uns zurück zu CodePen gehen und das in die Praxis umsetzen. Mit dem, was wir gerade einen Blick genommen haben, können wir einige zusätzliche Parameter hinzufügen, um Bild zu zeichnen. Anstatt das Bild in voller Größe, das wir derzeit erhalten haben, möchte ich ein Quadrat von 100 x 100 Pixel von der oberen linken Ecke des Originalbildes zuschneiden . Wir können den ersten Wert so belassen, wie er ist, denn dies ist das Bild, das wir gerne greifen möchten. Wir können auch die 0, 0 Position verlassen , da dies die obere Ecke ist, von der wir beginnen möchten. Der Bereich, den wir packen wollen, wird 100 mal 100 sein. Dann, um diesen Abschnitt in die Mitte der Leinwand zu platzieren, werde ich canvas.width, geteilt durch 2, wegnehmen 50. Diese 50 ist die halbe Breite des Bildes, so dass das Bild in der Mitte versetzt wird. Wir werden dasselbe für die Höhe tun. Teilen Sie durch 2, nehmen Sie 50. Dann halten wir die gleiche Größe wie die ursprüngliche Ernte von 100 mal 100 Pixel, und da haben wir es. Dies ist die obere linke Ecke, die vom Originalbild, das aus diesem Abschnitt stammt, abgeschnitten wird. Dann werden wir in diesem beschnittenen Bereich mit diesen letzten vier Parametern in die Mitte der Leinwand platzieren. So können wir Bilder auf die Leinwand hinzufügen und ich werde Sie im nächsten Video sehen. 14. Grundlagen der Arbeitsfläche: Muster und Schatten: In diesem Video geht es um die Verwendung von Mustern und Schatten mit der Leinwand. Wir werden mit Mustern beginnen, und für dieses Beispiel werde ich ein Bild hinzufügen. Dieses Bild wird eine nahtlose Kachel sein, was bedeutet, dass wir die Kachel horizontal und vertikal wiederholen können, und es wird alles zu einem verschmelzen. Ich habe einen neuen CodePen mit dem Titel Patterns & Shadows erstellt. Ich habe die Leinwandbreite so geändert, dass sie ein wenig größer ist, was 1.000 mal 1.000 ist. Dies liegt daran, dass die Kachel, die ich verwenden werde, 640 Pixel beträgt, dies gibt Ihnen nur ein wenig mehr Platz, um die Kachel zu wiederholen. Wenn die Funktion beibehalten wird, die Onload-Funktion aus dem letzten Video, die Canvas-Variable, die Kontextvariable. Ich werde auch diese Bildvariable wiederverwenden, die wir im letzten Video verwendet haben. Um zu beginnen, ich werde nur zu Pixabay gehen , nur um eine Bildkachel für die Verwendung in dieser Demonstration zu greifen. Ich möchte eine Suche nach nahtlosen Kacheln machen, und dann wählen Sie einfach eine Kachel, die Sie mögen. Ich gehe für diesen ein und dann klicke ich einfach auf den kostenlosen Download. Idealerweise möchten wir das Bild herunterladen und es in unseren Projektordner einfügen, ich werde von dort aus verlinken. Aber weil wir CodePen verwenden, es sei denn, Sie haben ein PRO-Konto, werden Sie diese nicht als ein Asset erstellen, das Sie tatsächlich verwenden können. Ich gehe nur zu diesem Beispiel, klicke auf „Ansicht“ und wähle dann die Bildadresse aus. Dann fügen wir dies in die Bildquelle aus dem letzten Video ein. Jetzt können wir dieses Bild verwenden, um ein Muster zu erstellen, und das Muster wird in ähnlicher Weise deklariert wie die Farbverläufe, die wir uns vor ein paar Videos angesehen haben. Wir werden dies in einer Mustervariablen aufhalten, einer Mustervariablen. Ich werde dies auf CTX.createPattern setzen. Muster erstellen nimmt zwei Parameter. Die erste werden wir das Bild hinzufügen, das Sie anzeigen möchten, und dann der zweite Parameter ist die Art der Wiederholungen, die wir verwenden möchten. Ich werde das nur wiederholen, und wir werden in einem Moment darauf zurückkommen. Als nächstes können wir den FillStyle so einstellen, dass er gleich dem Muster ist, das wir gerade erstellt haben. Dann schließlich setzen wir die Form, die wir mit dem Muster gefüllt werden wollen, ich werde nur ein Rechteck hinzufügen und es die gleiche Größe wie die Leinwand behalten. 0, 0 und die Canvas-Größe ist jetzt 1.000 mal 1.000. Wir können sehen, dass das Bild angezeigt wurde, wählen Sie Ihre Strecken Sie den Browser und sehen Sie all dies. Das Bild wurde wiederholt, es ist jetzt die volle Größe der Leinwand gefüllt. Wir wissen, dass es wiederholt wurde, weil Canvas 1.000 Pixel breit ist, aber das Bild ist nur 640. Wir haben soeben wiederholen, und das ist der Anfang einer neuen Kachel. Werfen wir einen Blick auf einige weitere Parameter. Dies war wiederholen, ich kann es in No-Wiederholungen ändern und Sie können wahrscheinlich erraten, was das tut. Dadurch wird das Bild so geändert, dass es nur einmal an der angegebenen Position angezeigt wird. Es gibt auch Wiederholungen auf der X- und der Y-Achse. Also repeat-x, und das bedeutet, dass sie sich nur über die X-Achse wiederholt, es sollte etwas Leerraum am unteren Rand sein und dann machen wir das gleiche auf der Y-Achse. Es gibt die vertikalen Wiederholungen, und natürlich können Sie alles wiederholen, was Sie wollen, es muss kein Bild sein. Als nächstes möchten wir mit Blick auf Schatten fortfahren, und um das zu tun, werde ich nur das Feld für die Leinwandbreite auf 600 mal 300 ändern. Dann können wir das Musterbeispiel entfernen, um alle Bildabschnitt, alle Musterabschnitt zu verschieben , können Sie auch das Bild von unten dort entfernen. Für dieses Schattenbeispiel werde ich Text auf die Leinwand zeichnen. Mit ctx.font wird es ziemlich groß machen, wir machen es 80 Pixel. Dann eine Schriftart von Helvetica, und dann ein FillStyle, um gleich einer Farbe zu sein. Ich mache meins grün und dann den Text ausrichten, lass uns in der Mitte der Leinwand platzieren. Fein, lassen Sie uns den Text mit FillText zeichnen. Hoffentlich erinnern Sie sich, wie Sie dies tun, der erste Parameter ist der Text, den wir anzeigen möchten. Lassen Sie uns es einfach halten, mit Text-Schatten ist fünf dieses Beispiel. Die X- und Y-Position, werde ich eine Größe der Leinwand Breite geteilt durch 2 erstellen, und dann das gleiche für die Höhe. Der letzte Parameter war die maximale Breite, lassen Sie uns dies auf 400 Pixel beschränken. Es gibt Text, aber wir haben gerade einen kleinen Tippfehler , der natürlich px sein muss. Okay, großartig. Wir haben den Text auf dem Bildschirm, wir können beginnen, einige Schatten hinzuzufügen. Lassen Sie uns dies über dem Text tun, den wir gerade gezeichnet haben. Die erste Methode, die wir uns ansehen werden, ist ShadowOffsetX. Dies ist ein Wert in Pixel, beginnen wir mit fünf. Dies ist der ShadowOffset auf der X-Achse, und dann, damit Sie den Schatten sehen können, den wir gerade erstellt haben, lassen Sie uns eine Schattenfarbe hinzufügen. Wir haben CTX.ShadowColor, es zeichnet sich gut aus, lassen Sie uns das ändern, um rot zu sein. Wir können den roten Schatten sehen, der über fünf Pixel auf der X-Achse kommt. Diese Werte können positiv oder negativ sein, daher ändern wir dies in negative fünf. Wir sollten den Textschatten auf der gegenüberliegenden Seite sehen. Wir können das gleiche auf der Y-Achse tun, wir haben eine ShadowOffsety. Fügen wir einen Fünf-Pixel-Schatten auf der Y-Achse hinzu. Wie Sie sehen können, können wir das X und das Y kombinieren, um einige schön aussehende Effekte zu erzeugen. Wir können auch eine Unschärfe hinzufügen, indem Sie die ShadowBlur -Methode verwenden, und sie legt die Ebene der unscharfen Effekte fest. Der Standardwert ist Null, wir setzen dies auf etwas größer, es ist nur 15. Dies gibt uns eine schöne verschwommene oder eine gemischte Wirkung. Wir können das erhöhen, um ein bisschen größer zu sein. Wir versuchen 30, und das ist ein bisschen subtiler. Ändern wir es zurück auf 20. Spielen Sie ein wenig mit diesen Werten herum und sehen Sie, was Sie mit kommen können, und ich sehe Sie im nächsten Video. 15. Fortgeschrittene Stufe: Béziers und quadratische Kurven: Willkommen zurück Jungs. Wir werden die Dinge jetzt ein wenig beginnen und einen Blick darauf werfen, wie man Bézier- und quadratische Kurven benutzt. Lassen Sie uns einen neuen Stift für dieses Video erstellen. Dies wird also Bézier- und quadratische Kurven genannt. Wir sollten das nochmal kopieren, nur damit wir uns nicht daran erinnern müssen, wie wir das buchstabieren sollen. Fügen Sie das in den Titel und speichern Sie es, machen Sie es ein bisschen mehr Platz. Es sollte das gesamte Skript wieder einziehen, außer unseren Canvas- und Kontextvariablen. Also sind wir gut zu gehen. Zuerst werden wir einen Blick auf quadratische Kurven werfen. Um zu beginnen und besser zu erklären, wie sie funktionieren, werde ich zuerst drei Kreise oder drei Punkte auf der Leinwand als Referenz zeichnen. Beginnen wir mit einem Pfad, und Sie sehen, warum wir diese in einem Augenblick zeichnen. Lassen Sie uns die Startpunkte erstellen, und dann lassen Sie uns unseren ersten Kreis erstellen, wir sind im Bogen. Also werde ich die Startpunkte 50, 250, Radius von fünf, und die Position von Null zu beginnen, und einen vollen Kreis zu machen, ist zweimal Math.pi. Ich werde diesen Bogen nur kopieren, damit du ihn noch ein paar Mal benutzen kannst. Gehen wir zu den zweiten Punkten, um den zweiten Kreis zu zeichnen. Also soll man bei 550, 50 sein. Zeichnen wir den zweiten Bogen darauf, und dann wird der dritte in Position 50, 50, und dann den dritten Kreis, genau dort. Um dann die Kreise zu zeichnen, verwenden wir die Füllmethode. Lassen Sie uns die Positionen der Bögen so stark ändern, wenn sie sich bewegen. Das ist also 550 und 50, und das dritte ist 50 und 50. Nun haben wir auch die drei Punkte auf der Leinwand als Referenz bekommen. Also werde ich nur einen Kommentar hinzufügen. Dies ist der Startpunkt, die Endpunkte, und dann der dritte ist, was wir einen Kontrollpunkt nennen. Wir verwenden quadraticCurveto, um eine so genannte quadratische Bézierkurve zu erzeugen. Diese Art von Kurve beginnt mit den aktuellen Stiftpunkten. Beginnen wir mit den aktuellen Stiftpunkten mit einem MoveTo. Dies ist die Position, mit der wir beginnen wollen, das ist dieser erste Punkt hier. Die Ausgangspunkte waren also 50, 250. sind Punkte innerhalb der Klammern, die den Stift zu diesem Startpunkt bewegen. Dann verwenden wir die quadraticCurveto Methode, und es nimmt die Kontrollpunkte und auch die Endpunkte. Lassen Sie uns das jetzt hinzufügen. So CTX.quadraticCurveto. Die ersten beiden Parameter sind die Kontrollpunkte, das ist dieser. Dies ist die Position 50, 50, und dann zwei weitere, was der Endpunkt ist. Wir haben auch die Endpunkte von 550, 50, und dann, um die Linie tatsächlich zu zeichnen, können wir den Strich verwenden. Jetzt schauen wir mal, was passiert. Wir haben eine schöne quadratische Kurvenlinie, also haben wir die Startpunkte, zu denen wir verschoben haben, wir haben die Endpunkte, die wir gerade hier hinzugefügt haben, und dann haben wir einen Kontrollpunkt , der effektiv zieht die Linie in Richtung, um die Art der Kurve zu erstellen, die wir wollen. Natürlich können wir dies ändern, um verschiedene Werte zu sein , und dies wirkt sich auf die Position der Linie aus. Ändern wir das auf 0, 0, und wir erhalten eine andere Art von Kurve, wenn die Linie weiter in die Ecke gezogen wird. Als nächstes möchte ich einen Blick auf eine Bézierkurve werfen. Dies funktioniert ähnlich wie die quadratische Kurve, die wir uns gerade angesehen haben. Aber anstatt einen Kontrollpunkt aufzunehmen, verwenden wir zwei Kontrollpunkte, um eine feinere Kontrolle über die Linie zu haben. Lassen Sie uns einfach einen Kommentar der Bézierkurve hinzufügen. Wir können an die Arbeit kommen, indem wir einige Referenzen hinzufügen, genau wie wir es vorher getan haben. Also CTX.BeginPath. Diesmal müssen wir einen Start- und Endpunkt und dann zwei Kontrollpunkte erstellen , von denen wir arbeiten können. Um den Abstecher auf der Leinwand zu machen, ändern wir einfach den FillStyle, diesmal rot. Der Ausgangspunkt, lassen Sie uns die ctx.arc tun. Der erste Punkt ist 100 mal 50, ein Radius von 5 Pixeln. Ich werde einen vollen Kreis machen, mit zwei Malen Math.pi. Lassen Sie uns diese kopieren, und fügen Sie sie dann mit der ctx.fill hinzu. Da gehen wir. Das ist der erste Punkt , der unser Ausgangspunkt ist. Dann erstellen wir den Endpunkt. Lassen Sie uns einen neuen Bogen hinzufügen, und wenn ich das MoveTo zuerst machen könnte. Im nächsten werden wir unsere Position 500, 50 hinzufügen und dann den Kreis an der gleichen Stelle hinzufügen, also ist das unser zweiter Kreis. Diese Kreise, die Sie zeichnen, dienen ausschließlich zu Demonstrationszwecken, nur damit Sie sehen können, wie die Linie zu Referenzpunkten gezogen wird. Wir müssen sie bei der Erstellung der Kurven nicht einbeziehen. Wir haben die Startpunkte, die Endpunkte, und jetzt müssen wir die ersten Kontrollpunkte erstellen. Also Kontrollpunkt 1, und dann bewegen wir den Stift auf Position 100, 250, fügen Sie in den Bogen an der gleichen Position von 100, 250. Dann Kontrollpunkt 2, ich möchte an Position 500, 250 sein. Ändern Sie einfach den Bogen auf 500 und dann 250. Dadurch bleiben der Startpunkt, der Endpunkt und dann die beiden Kontrollpunkte an der Bindung. Was wir suchen, ist eine Kurve, die hier beginnt und dann umgeht und von den beiden Kontrollpunkten und der Kurve bis zu denEndpunkten in der oberen rechten Ecke gezogen den beiden Kontrollpunkten und der Kurve bis zu den wird. Genau wie bei der quadratischen Kurve bewegen wir den Stift in die Ausgangsposition. Wir haben CTX.MoveTo, und der Ausgangspunkt war 150, und dann anstelle von quadraticCurveto, verwenden wir BezierCurveto, um die Linie zu zeichnen. Wir haben unsere Ausgangspunkte hier oben. Also lassen Sie uns zuerst Kontrollpunkt Nummer 1 hinzufügen, die 100, 250 auf dem x und y ist, und dann Kontrollpunkt 2, das ist x, 500, und dann y, 250, und dann fügen wir schließlich die Endpunkte hinzu, die unsere 500 von 50. Dann fügen wir den Strich hinzu, um schließlich die Linie auf die Leinwand zu zeichnen. Genau wie zuvor können wir die Kontrollpunkte verschieben, um einen anderen Linienstil zu erstellen und uns jede Art von Kurve zu geben, die wir verwenden möchten. Natürlich können Sie die Kurve auch anstelle von Strich mit der Hintergrundfarbe füllen. Also ändere es zurück in Schlaganfall. Das war's. Ich hoffe, das macht Sinn, und so können wir Bézier- und quadratische Kurven mit der Leinwand verwenden. Wir sehen uns im nächsten Video. Wir werden einen Blick auf die Verwendung der Speicher- und Wiederherstellungsmethoden werfen. 16. Fortgeschrittene Stufe: Speichern und Zutückstellen: Willkommen zurück, Jungs. In diesem Video werden wir einen Blick auf eine interessante Funktion der Leinwand werfen, die die Speicher- und Wiederherstellungsmethoden ist. Lassen Sie uns einen neuen Bereich erstellen, um dies zu demonstrieren. Lassen Sie uns diese speichern und wiederherstellen, so Kopieren und Einfügen in den Titel und lassen Sie uns das Skript bereinigen, völlig den gesamten Abschnitt aus dem letzten Video. Dann ändern Sie die Höhe der Leinwand auf 600 und dann sind wir gut zu gehen. Da gehen wir hin. Zunächst werden wir einen Blick auf speichern auf die Save Methode nehmen speichert den aktuellen Zustand der Leinwand auf einem Stapel. Der aktuelle Status gespeichert enthält Dinge wie den Strichstil, die Breite eines Linienstils, die Telefon-Baselines, mächtige Grenzen und die Transformation, um nur einige zu nennen. Beginnen wir mit dem Erstellen von zwei Kreisen, also werde ich einen roten und einen grünen erstellen. Ich werde einen Pfad erstellen, wir würden den Weg beginnen. Dies ist für den ersten Kreis, also werde ich einen FillStyle gleich grün hinzufügen und dann den Kreis mit der Bogenmethode zeichnen. Die erste Position, die ich will, ist 150 mal 150 auf dem x und y, ein Radius von 80, und dann erstellen wir einen vollen Kreis mit der Ausgangsposition von Null. Dann zweimal math.pi, und dann verwenden Sie eine Füllung, also ist es ein grüner Kreis und ich werde nur kopieren Sie dies und fügen Sie es unten wird den FillStyle in den roten und die Position auf 400, 150 ändern , also haben wir schöne Rotte und ein schöner grüner Kreis. Ich werde einen weiteren Kreis unten erstellen, aber dieses Mal ohne Farbfüllung, also lasst uns das löschen und die Position auf 150, 400 verschieben. Ändern Sie das y auf 400. Sie bemerken, dass dieser dritte Kreis, obwohl wir keinen FillStyle haben, die rote Farbe vom vorherigen Kreis geerbt hat. Das ist in Ordnung, wenn es das ist, was wir wollen. Aber wir können auch speichern und wiederherstellen an bestimmten Punkten zu Änderungen verwenden. Zum Beispiel können wir den Canvas-Status nach dem ersten Kreis speichern und dann die Wiederherstellungsmethode verwenden, kurz bevor wir den dritten Kreis erstellen, um ihm die Farbe Grün zu geben. Kurz nach dem Codeblock für den ersten grünen Kreis fügen wir ctx.save hinzu und damit wir wissen, was wir tun. Wir werden nur einen Kommentar hinzufügen, damit dies die grüne Füllung speichert und dann die grüne Füllung auf dem dritten Kreis zu erstellen, können wir ctx.restore hinzufügen. Falte einfach den dritten Kreis gezeichnet wird. Da gehen wir hin. So stellt die Farbe der Kreise wie die erste grün wieder her. Wir können auch mit mehreren Speicher- und Wiederherstellungspunkten fortfahren. Ich werde einen vierten Kreis erstellen, nicht den unteren. Dieses Mal ist das x 400, das y ist 400, und der Rest kann gleich bleiben. Wir haben einen sicheren Punkt für das grüne Feld, also lassen Sie uns einen sicheren Punkt auch für die rote Farbe hinzufügen. Lassen Sie uns noch ein Speichern und einen Kommentar machen, damit dies die rote Füllung speichert. Also weißt du, ist da gerade etwas passiert. Nachdem wir eine zweite Speicherung erstellt haben, speichern wir die rote Füllung, der grüne Kreis, den wir Ihnen zuvor wiederherstellen, wird nun wieder auf Rot zurückgesetzt. Lassen Sie uns das einfach zu C kommentieren, also ist es grün. Dann fügen wir das Speichern hinzu, und dann ändert es sich rot. Der Grund dafür ist, dass Sie zu Beginn dieses Videos erwähnt , dass jedes Mal, wenn wir einen Speicher erstellen, dem Stapel hinzugefügt wird, also werden wir zuerst speichern, das ist ein Greenfield, würde dann auf dem Stapel gespeichert eine rote Füllung und weil wir die Wiederherstellungsmethode nur einmal durchgeführt haben, sie wieder auf den letzten Safe zurückgesetzt, nämlich die rote Füllung. Wenn wir dann einen weiteren Speicher zurück auf das Greenfield zurücksetzen wollen, müssen wir eine zweite Wiederherstellung durchführen, also ctx.restore. Nun wird dies, um wieder das Grün wiederherzustellen, nur den FillStyle entfernen. Das sollte zu grün gehen, was es tut. Lassen Sie uns einige Kommentare hinzufügen Da dies die erste Wiederherstellung ist, stellt dies die letzte Speicherung wieder her und die letzte Speicherung war die rote Füllung. Dann unten haben wir die zweite Wiederherstellung erhalten, die die zweitletzte Speicherung aus dem Stapel wiederherstellt, und die zweitletzte Farbe, die Sie gespeichert haben, war die ursprüngliche grüne Füllung. Sie werden so hoffen, dass das Sinn ergibt. Wenn Sie speichern und wiederherstellen verwenden, ist alles auf die Reihenfolge zurückzuführen, in der wir die Speicherkapazien erstellen. Dann müssen wir in einer bestimmten Reihenfolge wiederherstellen, um sicherzustellen, dass wir die bestimmte Speicherung wiederherstellen, die wir wiederverwenden möchten. Vielen Dank und wir gehen jetzt zum nächsten Video über, in dem wir einen Blick darauf werfen, wie skaliert, gedreht und übersetzt werden kann. 17. Fortgeschrittene Stufe: Skalierung, Drehung und Übersetzung: Willkommen zurück, alle. Beginnen wir mit dem Erstellen in unserem neuen Stift für dieses Video, das als Skalieren, Drehen und Übersetzen bezeichnet wird. Also lassen Sie uns einfach den Titel ändern, um zu skalieren, zu drehen und zu übersetzen. Dann lassen Sie uns unsere Skelett-Vorlage erstellen. Zur Wiederverwendung wird die Funktion geben, die beiden Variablen und der ganze Rest kann gelöscht werden. Da gehen wir. In diesem Video geht es darum, Transformationen auf unsere Canvas-Zeichnungen anzuwenden. In diesem Video werden wir uns mit Skalierung, Drehen und Übersetzen beschäftigen. Zuerst möchten wir damit beginnen, ein einfaches Rechteck zu erstellen, das manipuliert werden soll. Lassen Sie uns also ein Rechteck mit einem Füllstil zeichnen. Ich werde meine lila machen. Zeichnen Sie dann mit FillRect auf den Canvas. Die obere linke Ecke ist also 0, 0, 300 im x und 200 auf dem y. Also nur ein einfaches gefülltes Rechteck. Ich werde damit beginnen, die Übersetzungsmethode hinzuzufügen, und dies verschiebt die Referenzpunkte von x und y an eine andere Position. Also lassen Sie uns ctx zu unserer Übersetzung hinzufügen. Es nimmt zwei Parameter, die der x-Wert ist, mit dem zu beginnen. Lassen Sie uns einen y-Wert von 100 hinzufügen. So können wir sehen, was das gerade getan hat. Wir haben die Referenzpunkte übersetzt, die ursprünglich 0, 0 in der oberen Ecke waren. Dann haben wir den Bezugspunkt auf 100 und 100 nach unten auf der Y-Achse verschoben. Wir können auch unser Dreieck drehen oder unsere Zeichnung drehen, indem wir die Rotationsmethode verwenden. Bei Verwendung von Rotation ist der Standardwert, bei dem wir uns befinden, nicht in Grad, sondern in Bogenmaß. Um also in Grad zu konvertieren, müssen wir die Grade mit maf.pi dividiert durch 180 multiplizieren. Der gleiche Wert, den wir zu Beginn hatten, wie 45, wird dann in Grad sein. Dadurch wird das Rechteck um 45 Grad gedreht. Wir müssen nur vorsichtig sein, wenn wir übersetzen und beide zusammen drehen. Wir müssen zuerst übersetzen hinzufügen. Denn wenn nicht, sind die Rotationspunkte der Canvas-Ursprung, der die obere linke Ecke ist. Stellen Sie also sicher, dass diese beiden in der richtigen Reihenfolge angewendet werden. Also werde ich nur die Rotation auskommentieren und ich werde mit der Skalierung unserer Zeichnungen fortfahren. So können Sie sie so skalieren, dass sie größer oder kleiner sind. Um dies zu tun, werde ich nur ein weiteres Rechteck erstellen. Also kopiere ich einfach diesen Abschnitt und füge dann das zweite Dreieck ein. Also, der Füllstil, werde ich meine auf Orange setzen. Dann, um es wegzubewegen, fügen wir eine Übersetzung hinzu. Also das x von 100 und der y-Wert von 300. Also haben wir die beiden Rechtecke auf den Bildschirm mit verschiedenen Übersetzungsorten gezeichnet. Wir werden die Skalierungsmethode verwenden, um einige Skalierung auf das zweite Rechteck anzuwenden. Also verwenden wir die ctx.scalemethod. Dies nimmt zwei Parameter an. Also die Breite und die Höhe. Also, wenn wir die Zeichnung auf die Hälfte ihrer aktuellen Größe skalieren wollen, oder 50 Prozent, würde 0,5 auf x und y verwenden. Dies macht unser Rechteck die Hälfte der Größe, die es vorher war. Natürlich wäre man 100 Prozent seiner ursprünglichen Größe. Wenn wir es doppelt so groß machen wollten, könnten wir das auf zwei oder 1,5 ändern, auf 150 Prozent und so weiter. Solch ein grundlegender Blick auf die Anwendung von Transformationen. Im nächsten Video werden wir auf dem aufbauen, was wir in diesem Video gesehen haben, indem wir uns ansehen , wie man sowohl die Transformationsmethode, die beginnende Transformation, verwendet . Also sehen wir uns dort. 18. Fortgeschrittene Stufe: Transformationen der Zeichenfläche: Im letzten Video haben wir uns einige Transformationsmethoden angesehen, wie zum Beispiel: Übersetzen, Drehen und Skalieren unserer Objekte. In diesem Video werden wir weitermachen und einen Blick darauf werfen, wie wir all diese Transformationen in einer einzigen Methode anwenden können . Insbesondere werden wir einen Blick auf die Transformationsmethode und setzen Transformation. Lassen Sie uns unseren neuen Stift erstellen, um dies in zu tun. Dieser wird Transformationen genannt. Wir können die Größe der Leinwand so belassen, wie sie ist. In der Tat werden wir das erste Rechteck verlassen, das das lila ist. Wir sollten das orangefarbene Beispiel loswerden, und wir werden mit diesem Dreieck arbeiten. Ich habe auskommentiert drehen, und möchte das gleiche für übersetzen tun. Du wirst in einem Moment sehen, warum diese beiden übrig sind. Dieser stellt unser Rechteck so wieder her, dass es sich an den ursprünglichen Koordinaten oben links befindet. Zuerst möchten wir einen Blick auf die Verwendung der Transformationsmethode werfen, also ctx.transform. Das kann ziemlich kompliziert werden. Ich werde nur einen Kommentar oben hinzufügen, um Ihnen alle Parameter zu zeigen, die wir verwenden können, also das Sechs-Intervall. Die erste ist die horizontale Skalierung. Die zweite ist horizontale Schrägstellung. Die primitive Zahl 3 ist senkrecht schief. Dann Nummer 4 ist vertikale Skalierung. Nur noch zwei weitere zu gehen, Nummer 5 ist zu übersetzen oder horizontal zu bewegen. Die letzte, die Nummer 6 ist, ist vertikal zu übersetzen. Da gibt es eine ganze Menge zu berücksichtigen. Zunächst einmal werden wir einen Blick auf die Parameter werfen, die wir bereits kennen, die wir im letzten Video verwendet haben und diese skalieren und übersetzen. Lassen Sie uns diese innerhalb der Transformationsmethode hinzufügen. Schauen wir uns zunächst die Skalierung an. Der erste Parameter ist die horizontale Skalierung. Ich werde das auf eins setzen, was 100 Prozent entspricht. Genau wie das letzte Video, 0.5 ist 50 Prozent und so weiter. Es ist vorerst gegeben, also lassen Sie uns das auf Null setzen. Gleiches mit der vertikalen Schrägstellung. Der vierte Parameter ist die vertikale Skalierung. Ich setze das wieder auf ein oder 100 Prozent. Dann sind die Nummern 5 und 6 auf der X- und Y-Achse zu übersetzen. Lassen Sie es uns einfach halten und wir übersetzen es auf die x-Achse, 50 Pixel und Null auf dem y, und speichern Sie das. Da ist unser Rechteck zurückgekehrt. Es wurde die gleiche Größe zurückgegeben, weil wir die Skalierung auf x und y auf 100 Prozent festgelegt haben . Ich kann das ein bisschen größer machen, genau so. Anstatt die Ausgangsposition in der oberen linken Ecke von Null Null zu sein, haben wir uns über 50 Pixel auf der X-Achse bewegt, und wir haben sie auf Null auf der Y-Achse gelassen, so dass sie immer noch oben ist. Die einzigen Parameter, die wir nicht gesehen haben, sind die horizontale und vertikale Schrägstellung. Lassen Sie uns jetzt einige dieser Werte anwenden. Beginnen Sie mit horizontaler Schrägstellung und lassen Sie uns sehen, welche Wirkung das hat. Fangen wir mit 0,2 an. Lets erhöht dies. 0.5, und du bekommst die Idee, damit ich das weiter erhöhen kann. Wir werden es versuchen, und wir können uns noch weiter bewegen, wir halten nicht an einem und so weiter. Lassen Sie uns jetzt die vertikale Verzerrung ändern. Lassen Sie uns wieder mit 0.2. beginnen und wir sollten eine Schrägstellung in der vertikalen Richtung anstatt horizontal bekommen . Werfen wir einen Blick auf 0,5. Wir können dies verwenden, um einige interessante Formen zu machen. Lasst uns eins versuchen. Da gehen wir. Dies ist nützlich, wenn wir einige Transformationen auf die gleiche Form anwenden möchten. Ich werde es wieder auf Null ändern und zu unserem ursprünglichen Rechteck zurückkehren. Bei der Verwendung der Übersetzungsmethoden werden nicht nur die Transformationen, die wir innerhalb der angewendeten Parameter setzen, sondern auch alle Transformationen wie Skalieren und Übersetzen berücksichtigt, die bereits zuvor deklariert wurden. Dies ist, was wir in die Transformationsmatrix hinzufügen nennen. Mit der Transformationsmethode haben wir die Translation horizontal um 50 Pixel verschoben. Wenn wir die Übersetzungen auskommentieren, die wir zuvor gesetzt haben. Auf der X-Achse haben wir die Übersetzung von 100 Pixeln, also sollten wir die 100 Pixel bekommen, fügen Sie es der 50. Wenn wir nur die Übersetzungen auskommentieren, was wir tun. Das bewegt sich über 150 Pixel und wir haben auch die 100 Pixel auf der Y-Achse. Denken Sie daran, dass alles, was vor dieser Transformation angewendet wird, ebenfalls berücksichtigt wird. Aber was wäre, wenn wir wollten, dass unsere Transformation frühere Transformationen ignoriert oder die Transformationsmatrix effektiv zurücksetzt. Dann können wir die Vorteile der Set-Transformationsmethode nutzen. Set Transformation setzt die aktuelle Transformation zurück, bevor alle Transformationen angewendet werden, die wir festgelegt haben. Um dies zu tun alles, was wir tun müssen, ist Veränderung Transformation gesetzt werden transformieren. Sie bemerken, wie die Übersetzung, die wir oben gesetzt haben, jetzt ignoriert wurde, so dass nur die Parameter, die wir festgelegt haben, auf das Rechteck angewendet werden. diese Weise können wir mithilfe der Transformationsmethode übersetzen, skalieren und verzerren. Die Hauptsache ist, dass bei der Verwendung von Transformation immer alle vorherigen Transformationen berücksichtigt werden. Wenn wir jedoch festlegen, dass transformiert werden soll, werden alle vorherigen Transformationen ignoriert, so dass nur diejenigen in den Klammern angewendet werden. Danke fürs Ansehen und ich sehe dich im nächsten Video. Wir werden einen Blick auf die Arbeit mit Pixeln werfen. 19. Fortgeschrittene Stufe: Arbeit mit Pixeln: In diesem Video werden wir von Transformationen weitergehen, ich werde einen Blick auf die Arbeit mit Pixeln werfen. Ich habe einen neuen Stift erstellt, innerhalb von CodePen heißt, mit Pixeln arbeiten. Wir haben die Höhe der Leinwand zurück auf 300 geändert, weil das alles ist, was wir brauchen, und auch alle Transformationen aus dem letzten Video entfernt. Digitale Fotos oder Rostbilder bestehen aus Pixeln, und die Farben bestehen aus einer Kombination aus Rot, Grün und Blau, um jede denkbare Farbe zu schaffen. Fotos können oft auch einen Falloff-Kanal haben, der als Alpha-Kanal bezeichnet wird, und dies stellt den Transparenzwert dar. Für dieses Video werden wir die Werte dieser vier Kanäle manipulieren, um Effekte wie das Erstellen eines Farbbildes in Graustufen zu erzeugen. Für dieses Video werden wir die Werte dieser vier Kanäle manipulieren , um verschiedene Farben und Effekte zu erzeugen. Diese Effekte können verwendet werden, um beispielsweise das Bild-Graustufen oder Schwarz-Weiß zu erstellen, und dies sind ähnliche Techniken, die in Bildbearbeitungssoftware wie Photoshop verwendet werden . Zuerst werden wir einen Blick auf CreateImageData werfen, wir wollen dies in einer Variablen namens ImageData aufhalten. Setzen Sie das auf ctx.createImageData, und dafür werden wir einfach eine Größe des Bildes übergeben, das Sie erstellen möchten. Ich werde meine 400 Pixel breit und 200 Pixel hoch machen, und dies erstellt ein leeres ImageData-Objekte. neue ImageData-Objekt übernimmt Parameter wie eine Breite, eine Höhe und auch die ImageData. Als nächstes werden wir eine JavaScript-for-Schleife erstellen, und dies ist so können wir durch alle Werte innerhalb der ImageData-Objekte Schleife. Die Werte, an denen wir interessiert sind, sind die Pixeldaten, weil wir eine Fläche von 400 x 200 erstellt haben, aber eine niedrigere Pixel für die Arbeit, und jedes Pixel hat vier verschiedene Farben, oder für verschiedene Kanäle, die das rote, grün, blau und Alpha. Bei der Verwendung von CodePen könnte es ziemlich einfach sein, den Browser zu zerquetschen. Ich werde nur die Schleife auskommentieren, oder wir tippen tatsächlich aus, damit es keine Probleme verursacht. Also i ist gleich 0; ein i ist kleiner als ImageData.Data.Length; i plus gleich 4. Werfen wir einen Blick, was wir haben, wir haben eine for-Schleife erstellt, und eine for-Schleife wird alle Daten für eine bestimmte Menge von Malen durchlaufen. Die Daten, die wir durchlaufen wollen, die ImageData, die wir gerade erstellt haben, und data.length ist die Länge des Arrays oder die Anzahl der Pixel, die in einem Abschnitt von 400 x 200 Pixel enthalten ist. Denn jedes Pixel hat die vier Werte oder die vier Kanäle, über die wir gesprochen haben, das war das Rot, Grün, Blau und Alpha. Wir werden dann die Schleife jedes Mal um vier erhöhen, und dann könnten diese vier einzelnen Werte innerhalb der Schleife einzeln manipuliert werden. Lassen Sie uns das jetzt tun, wählen Sie die ImageData.Data und dann in eckigen Klammern, können wir das einzelne Pixel auswählen. Wir haben die Variable von i erstellt, i plus 0 wird der erste Kanal sein, und das ist der rote Wert und der Wert liegt zwischen 0 und 255. Lassen Sie uns diese drei weitere Male kopieren, um die vier verschiedenen Kanäle zu erstellen. Dieser wird der grüne Kanal sein, das ist i plus 1, und dann i plus 2 ist für den blauen Kanal, und dann i plus 3, und das ist das Alpha oder die Transparenz. 0 ist vollständig transparent und 255 ist eine einfarbige Farbe. Wenn das bis zur Reife ein wenig verwirrend aussieht, werden wir uns alle Daten innerhalb der Konsole ansehen und sollten alle klar werden. Die Pixelwerte für neue Objekte sind standardmäßig transparenter Block, und dies ist ein RGBA-Wert von Null. Ich werde mich nur ändern, um eine grüne Farbe zu sein. Ich setze die Rottöne auf 0 und das Grün auf den Maximalwert von 255, das Blau auf 0 und die Transparenz. Um es zu einer einfarbigen Farbe zu machen, machen wir das 255. Verwenden Sie dann schließlich Ctx.putimageData, um die ImageData auf die Leinwand zu legen. Die ImageData, die wir hinzufügen möchten, ist die Variable von ImageData, und die Position ist 0, 0. Jetzt können wir die for-Schleife auskommentieren, um dies auszuführen, also speichern Sie das. Es gibt unser Bild, das 400 Pixel mal 200 Pixel ist, mit einer Schleife durch alle einzelnen Farben und ändern Sie die Standard-schwarze Farbe zu dieser grünen Farbe, die wir hier eingestellt. Um ein besseres Verständnis davon zu bekommen, was dort vor sich geht, mache ich nur eine console.log und die Informationen, die wir suchen möchten, sind die ImageData. Wir haben ein Konsolenprotokoll, lassen Sie uns mit der rechten Maustaste und gehen zu Inspektionen, und wenn wir dann die Registerkarte Konsole auswählen, gibt es unser ImageData-Objekt, das wir erstellt haben. Dann lass uns das öffnen, ich klicke auf den kleinen Pfeil dort. Wir haben die Daten und das sind die Daten, die innerhalb der Schleife darauf zugreifen werden. Ich habe auch eine Breite und Höhe, die wir auf 400 mal 200 gesetzt haben. Wenn wir dann die Daten öffnen, finden wir viele Daten, die dort gespeichert sind, und das sind all die Pixeldaten, die in diesem Bereich von 400 x 200 enthalten sind, und sie werden alle in Gruppen von 10.000 aufgeteilt. Ich habe gerade ein Dropdown-Menü geöffnet, es gibt Pixeldaten 0-99. Wir haben über vier Pixel gleichzeitig geloopt, 0, 1, 2, 3, 4, dies sind die vier Farbwerte für ein Pixel. Dann ist die Zahl 4, 5, 6 und 7 das zweite Pixel. Deshalb springen wir die Schleife jedes Mal um vier , so dass wir zum zweiten Satz von Pixeln, den ersten eingestellten Pixeln und so weiter bewegen . Es ist 0, 255, 0, 255 für jedes Pixel, und das sind die Daten, die wir es in der Schleife setzen würden. Wir können dies schnell ändern und einfach überprüfen, ob die Werte reflektiert werden. Zum Beispiel könnten wir rot auf 10 ändern, und lassen Sie uns das speichern und dann die Seite aktualisieren, die ImageData öffnen und dann wieder in den ersten Abschnitt. Wieder gibt es unser erstes Pixel, es ist 10, 255, 0, 255, und dann werden wir durch das zweite Pixel schleifen und so weiter. So können wir die vier Pixelwerte von RGBA manipulieren, lassen Sie uns einfach schließen. So können wir CreateImageData verwenden. Die letzte Methode, die ich Ihnen in diesem Video zeigen möchte, ist GetImageData, und wir können die GetImageData-Methode verwenden, um die Pixeldaten für den Bereich der Leinwand herauszufinden . Zum Beispiel, wenn wir nur die Pixeldaten wissen wollten 400 Pixel x 100 Pixel Quadrat können wir dies herausfinden. Lassen Sie uns dies ganz unten hinzufügen, ich werde nur kommentieren diese Konsole ausloggen zuerst. Lassen Sie uns tun CTX.GetImageData und dann geben wir die Startposition, die greifen wollen. Wenn wir einen Bereich in der oberen linken Ecke greifen wollen, setzen wir die Stoppposition von 0, 0. Lassen Sie uns den Bereich, den wir ergreifen wollen, auf 100 mal 100 einstellen. Wir können dies auf der Konsole protokollieren und dann diesen Abschnitt mit Klammern umgeben und dann aktualisieren. Wenn wir jetzt in die Entwickler-Tools gehen, indem Sie auf Inspect klicken, und gehen Sie dann in die Konsole und überprüfen Sie die ImageData. Wir können sofort sehen, dass es viel weniger Pixeldaten an den Wänden für das letzte Konsolenprotokoll gibt, wenn wir uns den vollständigen Abschnitt ansehen. Da wir nur einen kleinen Bereich in der oberen Ecke auschecken, haben wir viel weniger ImageData in der Konsole, und natürlich können wir immer noch jede dieser Bereiche öffnen und die einzelnen Daten sehen. So können wir mit Pixeln auf der Leinwand arbeiten, und wir sehen uns im nächsten Video. 20. Challenge-Einführung: so konvertierst du Bilder in Graustufen: Jetzt haben wir ein besseres Verständnis dafür, wie man mit Pixeln mit dem Canvas arbeitet, und jetzt möchte ich eine Herausforderung für dich stellen, um zu gehen. Diese Herausforderung besteht darin, ein Farbbild zu nehmen und es in Graustufen oder Schwarz-Weiß zu konvertieren , ich möchte wirklich, dass Sie dies selbst gehen, bevor Sie mit der Lösung im nächsten Video fortfahren. Aber bevor ich dich verlasse, um das zu versuchen, gibt es nur ein oder zwei kleine Dinge, die ich dir zuerst zeigen möchte, nur um dir mitzuhelfen. Der erste ist eigentlich, wie man ein Bild Graustufen macht. Im letzten Video haben wir eine for-Schleife verwendet, und wir haben alle Pixeldaten aus der Leinwand erfasst. Sobald Sie ein Bild gefunden haben, das Sie auf der Leinwand platzieren können, mit Zeichenbild werde ich Ihnen dann gerne eine for-Schleife in ähnlicher Weise wie diese erstellen, obwohl wir nur die roten, grünen und blauen Kanäle benötigen . Die Art und Weise, wie wir einen Graustufeneffekt auf Bild erstellen können, besteht darin, den Wert des roten , grünen und blauen Kanals als den Durchschnitt aller drei festzulegen. Eine Möglichkeit, dies zu tun, besteht darin, eine Variable zu erstellen und die drei Werte zusammen hinzuzufügen , sie dann durch drei zu teilen und die drei Kanäle als Äquivalent zum Durchschnittswert festzulegen. Eine weitere wichtige Sache, die ich darauf hinweisen möchte, die einige Probleme auf dem Weg verursachen kann, ist, dass wir die get ImageData-Methode für die Herausforderung verwenden müssen . Bei Verwendung dieser Methode erfordert es, dass sich sowohl das Image als auch der Code, der es ausführt, auf der gleichen Domäne des Webservers befinden. Da wir keinen Zugriff auf den Server haben, weil wir CodePen verwenden, müssen wir dem Bild ein spezielles Attribut hinzufügen, das Cross Origin genannt wird, und dies ermöglicht es uns, ein Bild aus einer anderen Quelle in unserer Demo zu verwenden ohne Fehler zu werfen. Wenn Sie mehr über das Cross-Origin-Attribut erfahren möchten, können Sie jetzt zu diesem Link auf dem Bildschirm gehen. Andernfalls zeige ich Ihnen nur die eine Codezeile , die Sie beim Erstellen des Bildes hinzufügen müssen. Die Codezeile, die Sie hinzufügen müssen, zuerst werde ich eine Bildvariable auswählen. Wenn Ihr wertvolles für das Laden eines Bildes ein anderer Name ist, ändern Sie das natürlich. Dann kreuzen Sie den Ursprung, und ich werde meinen gleich anonym setzen. Wenn Sie also diese Codezeile kurz vor dem Hinzufügen der Bildquelle hinzufügen, sollten Sie gut gehen. Sie auch, dass Sie mit einem Texteditor arbeiten, anstatt CodePen zu verwenden, möglicherweise auch in bestimmten Browsern das gleiche Problem auftreten, wie Google Chrome, wenn Sie die Standardeinstellungen verwenden. Eine Problemumgehung hierfür besteht darin, einen lokalen Host wie MMP zu verwenden, um Ihr Projekt zu versorgen. Oder ich habe auch festgestellt, dass der Firefox-Browser ohne Probleme funktioniert, also überlasse ich das mit dir, um zu gehen. Wenn Sie stecken bleiben, machen Sie sich keine Sorgen, gehen Sie einfach zum nächsten Video und ich zeige Ihnen meine Lösung. 21. Challenge: so konvertierst du Bilder in Graustufen: Hallo, Jungs. Ich hoffe, Sie haben es geschafft, die Herausforderung abzuschließen, oder ich hoffe, zumindest haben Sie ihr ein Ziel gegeben. Wenn Sie in Schwierigkeiten geraten sind, keine Sorge, ich werde voran gehen und Ihnen eine funktionierende Lösung zeigen. Lassen Sie uns voran und erstellen Sie einen neuen Stift. Ich werde das die Herausforderung nennen: Bild-Grauskalierung. Ich werde eine größere Leinwand als zuvor erstellen, nur weil Sie dort ein Bild hinzufügen werden, das wahrscheinlich größer als 600 mal 300 sein wird. Dann lassen Sie uns die Skripte leeren. Wir beginnen mit einem sauberen Skript-Tag. Von oben werde ich unsere beiden Variablen erstellen. Zunächst einmal ist eine Canvas-Variable, die wie üblich document.getElementById ist. Natürlich ist die ID myCanvas, und als nächstes die Kontextvariable, die wir als ctx betrachten. Lassen Sie es uns konsequent halten. Der Kontext ist äquivalent zu Canvas.GetContext. Jetzt verwende ich den 2D-Kontext. Das erste, was ich tun werde, ist, ein Bild zu erstellen. Dies wird ein Farbbild sein, das wir später mit den Pixeln arbeiten und es in Graustufen drehen können . Hoffentlich haben Sie zumindest so weit gekommen und Sie haben es geschafft, ein Bild auf dem Bildschirm hinzuzufügen. Variablenbild ist gleich einem neuen Bild. Sobald dieses Bild mit image.onload geladen wurde, werden wir eine Funktion auslösen. Diese Funktion wird zuerst das Bild auf den Bildschirm zeichnen, und dann eine zweite Sache, die wir tun wollen, ist eine zweite Funktion auslösen, die ich Graustufen nennen werde. Lassen Sie uns zunächst das Bild mit CTX.DrawImage auf die Leinwand zeichnen. Wir haben die Bildquelle noch nicht erstellt, aber wir werden einfach die Bildvariable dort einfügen. Wir beginnen die Position bei 0, 0, was die obere linke Ecke ist. Dann das image.src, das ist der Dateipfad. Gehen wir rüber zur Wikipedia. Ich werde ein Bild von dort greifen, um es zu verwenden. Dieser wird nichts nützen, er ist schwarz und weiß, um damit zu beginnen. Lassen Sie uns ein passendes Bild finden. Lassen Sie uns vorgestellte Inhalte ausprobieren. Das hier ist in Ordnung. Klicken Sie dann mit der rechten Maustaste, kopieren Sie die Bildadresse und fügen Sie diese in die Bildquelle ein Es gibt ein Bild, das auf dem Bildschirm erscheint, das funktioniert alles gut. Dann habe ich als nächstes eine Graustufenfunktion erstellt. Wir werden das in einem Moment schaffen, aber zuerst werde ich es innerhalb dieser Funktion nennen. Sie geben einfach Graustufen und dann die Klammern ein. Dies ruft die Graustufenfunktion auf, sobald das Bild geladen ist. Lassen Sie uns nun diese Graustufenfunktion erstellen. Was diese Funktion zu tun hat, ist zunächst, dass wir die Bilddaten greifen möchten, die im Grunde die volle Größe der Leinwand sind. Wir wollen das ganze Gebiet packen. Dann wollen wir die for-Schleife in ähnlicher Weise wie das letzte Video ausführen, in dem wir alle Pixeldaten durchlaufen. Wie im Intro erwähnt, werden wir die roten, grünen und blauen Kanäle durchschneiden, um uns einen Graustufeneffekt zu geben. Das letzte, was ich die Graustufenfunktion tun möchte, ist, das modifizierte Pixelarray oder die Schwarz-Weiß-Pixel zurück auf die Leinwand zu setzen, indem Sie die Put-Bilddatenmethode nutzen. Beginnen wir mit dem Erstellen einer Bilddatenvariablen . Dies ist äquivalent zu Ctx.GetImageData. Wir beginnen in der oberen linken Ecke der Leinwand, und dann greifen wir die gesamte Leinwandbreite und auch die Leinwandhöhe. Dadurch werden die Daten für das Bild gespeichert. Ich werde eine weitere Variable erstellen, die einfach Daten genannt wird. Ich möchte dies als ImageData.data festlegen. Wir müssen diese Variable nicht erstellen, der einzige Grund, warum ich es getan habe, ist, dass wir ImageData.Data ziemlich viel verwenden, wenn Sie die for-Schleife verwenden. Es ist nur ein wenig kürzer, indem es in einer Datenvariablen gespeichert wird. Dann sind wir bereit, unsere for-Schleife zu erstellen. Die for-Schleife kann ziemlich die gleiche sein wie die aus dem letzten Video, in dem wir uns die Modifizierung von Pixeln angesehen haben. Wir werden die Variable i auf 0 setzen, um mit zu beginnen, und wir werden die Schleife am Laufen halten, während ich kleiner als Daten ist, was diese Variable hier ist, .length. Diese Datenvariable ist eine kurze Version des Schreibens von ImageData.Data.Length. Dann ich plus oder gleich 4. Wenn Sie sich daran erinnern, ist dies, weil jedes Pixel vier Kanäle hat. Bevor wir anfangen, die einzelnen roten, grünen und blauen Kanäle zu modifizieren , werde ich eine Variable namens Durchschnitt erstellen. Dies wird der Durchschnittswert des roten, grünen und blauen Kanals sein. Lassen Sie uns dies gleich Daten und eckige Klammern i setzen. Dies ist der erste Kanal, der rot ist, die fügen Sie dies zum Grün, und blau. Daten i plus 1, und dann Daten i plus 2. Dies ist das Rot, Grün und Blau. Fügen Sie alle drei Werte zusammen und teilen Sie sie dann durch 3, um den Durchschnitt zu erhalten. Beginnen wir mit dem roten Wert. Daten auf dem ersten ist i, wenn Sie sich aus dem letzten Video erinnern, setzen wir diesen Wert auf 0-255. Aber dieses Mal werden wir es nur auf die durchschnittliche Variable setzen. Dann machen wir das noch zwei Mal, für das Grün und das Blau. Ich plus 1 und i plus 2, und dann nach unten. Stellen Sie sicher, dass dies jetzt außerhalb der Schleife ist. Wir müssen diese Bilddaten mit Ctx.putimageData wieder auf die Leinwand setzen. Die Daten, die wir auf die Leinwand zurückziehen möchten, sind diese Bilddatenvariable. An der Position befindet sich die obere linke Ecke, die 0, 0 ist, und speichern Sie diese dann. Sie bemerken, nachdem wir das getan haben, haben wir immer noch keine Änderung an der Leinwand. Wenn Sie sich vorher erinnern, erwähnten wir, dass wir eine Codezeile hinzufügen müssen, die die Cross-Origin-Attribute war. Lassen Sie uns das jetzt ganz oben hinzufügen. Bild.CrosssSorigin. Ich setze das auf anonym und speichere das dann. Sie können sofort sehen, dass der Effekt stattgefunden hat. Diese Codezeile hat es uns erlaubt, ein Bild aus einer anderen Quelle zu verwenden , ohne Fehler zu werfen. Lassen Sie uns das einfach erweitern, damit Sie sehen können. Wenn wir die Put-Bilddaten auskommentieren, sollten wir das ursprüngliche Farbbild zurückbekommen, was wir tun. Wenn Sie mit verschiedenen Effekten arbeiten möchten, anstatt alle drei Kanäle auf Durchschnitt eingestellt zu haben, können Sie dies ändern, um alles zwischen 0-255 zu sein, und Sie können den Effekt dort sehen. Das ist eine Möglichkeit, diese Herausforderung zu und natürlich gibt es viele verschiedene Möglichkeiten, dies zu tun. Aber die Hauptsache ist, ihm ein Ziel zu geben und aus Fehlern zu lernen. Herausforderung jetzt abgeschlossen ist, gehen wir jetzt zum nächsten Video über und wir werden einen besseren Blick auf Looping werfen. 22. Fortgeschrittene Stufe: Schleifen: Ich hoffe, Sie haben die letzte Herausforderung genossen und willkommen zurück. Wir schauen uns das Looping besser an. Ich werde Ihnen zeigen, wie wir einen ähnlichen Effekt erzeugen können, indem wir for-loops verwenden, die Übersetzungsmethode und auch rotieren. Dies ist das Endergebnis, das wir erreichen wollen, und es ist im Grunde ein roter Bogen oder ein roter Kreis, der der Hintergrund ist. Dann werden wir ein Segment erstellen, das das schwarze Dreieck Abschnitt ist. Wir werden dies auf die Leinwand zeichnen und dann eine for-Schleife verwenden, um den ganzen Weg herum zu schleifen und die Segmente zu zeichnen, bis wir zurück zum Anfang sind. Jedes Mal, wenn wir drehen und übersetzen verwenden, um sicherzustellen , dass das neue Segment gezeichnet in der richtigen Position ist. Gehen wir rüber zu CodePen. Anstatt die Herausforderungsvorlagen zu verwenden, werde ich die Arbeit mit Pixel Video folken, nur damit wir eine Vorlage haben, mit der wir arbeiten können. Nennen wir das Looping. Dann möchten Sie die Leinwand auf 600 x 600 ändern, und dann lassen Sie uns alles außer den beiden Variablen oben und auch der Onload-Funktion löschen . Da gehen wir. Wir sind jetzt gut zu gehen. Was ich anfangen werde, ist der rote Hintergrundkreis mit der Arc-Methode. Wir machen meins rot. Wir haben ctx.fillStyle gleich rot zu sein und den Bogen zu erstellen, und dies wird ein voller Kreis sein. Die Startkoordinaten haben nichts dagegen, in der Mitte der Leinwand zu sein. Ich werde canvas.width dividiert durch 2 zum Mittelpunkt, und dann canvas.height dividieren durch 2, um unseren Bogen in der Mitte der Leinwand zu beginnen. Der Radius wollen wir es 230 machen. Die Startposition Null, und um den vollen Kreis zu erstellen, ist es 2 mal Math.pi. Dann lassen Sie uns automatisch ausfüllen, um dies auf die Leinwand zu zeichnen. Genau so. Das wird nicht gezeichnet, also muss es irgendwo einen Tippfehler geben. Gerade da, was die Leinwandhöhe ist. Gut. Jetzt haben wir den roten Hintergrundkreis. Dann können wir daran arbeiten, die schwarzen Segmente zu zeichnen, die wir schleifen wollen. Lassen Sie uns eine Funktion erstellen, um dies zu tun. Ich werde meine Funktion zeichnen Segmente und dann den Code zwischen den geschweiften Klammern aufrufen . Beginnen wir mit BeginPath, und dann verwenden wir Ctx.MoveTo. Möchten Sie in die Mitte der Leinwand zu bewegen, so verwenden wir Leinwandbreite und -höhe geteilt durch 2, um uns die Startpunkte zu geben. Jetzt legen wir den Füllstil auf Schwarz fest. Um die Segmente zu zeichnen oder Segmente zu erstellen, verwenden wir einen Bogen. Dieser in der Mitte der Leinwand zu sein. Fügen wir das da drin hinzu. Der Radius wollen wir es 230, das ist das gleiche wie ein Hintergrund. Dann müssen wir den Start- und Endpunkt für jeden der Abschnitte definieren. Der Ausgangspunkt wird die 12-Uhr-Position sein. Das ist also 1,5 multipliziert mit Math.pi. Das ist ziemlich unkompliziert. Der Endwinkel braucht wenig mehr darüber nachzudenken. Wir haben 12 verschiedene Abschnitte im Kreis. Wir haben die sechs schwarzen Abschnitte und die sechs roten Abschnitte. Eine vollständige Drehung des Bogens ist 2 mal Math.pi. Wir können diese beiden teilen, die ein vollständiger Kreis ist, der durch die 12 Abschnitte geteilt werden soll , und dies gibt uns ein Volumen von 0,1666, und dann können wir diesen Wert auf die ursprüngliche 1.5 hinzufügen. Wir gehen von der 12-Uhr-Position, und dann gehen wir ein wenig weiter, um die Segmente zu erstellen. Also 0,16 plus 1,5 gibt uns den Wert von 1,6666 multipliziert mit Math.pi, und das sollte uns unsere Segmente geben. Dann müssen wir die Segmente mit der Füllmethode füllen, um auf die Leinwand zu zeichnen. Dann rufen wir eine Funktion direkt unten auf. Zeichnen Sie unsere Segmente, und sie sollten die Segmente hinzufügen. Da gehen wir, sagt der erste, den wir hinzufügen müssen. Der Ausgangspunkt ist diese Zeile hier, die 1,5 mal Math.pi ist. Wenn zu diesem Wert hinzugefügt wird, 0,106, das ist ein Zwölftel des Ansichtsbereichsradius , der gerade hier der Endpunkt ist. Das ist unser erster Abschnitt, der auf die Leinwand gezeichnet ist. Anstatt diesen ganzen Code immer wieder einzugeben, eine einfachere Möglichkeit, dies zu tun, darin, eine for-Schleife zu verwenden. Lassen Sie uns die gesamte Funktion mit einer for-Schleife umgeben. Beginnen wir nur mit der Funktionslinie, und beenden Sie sie dann nach dem Zeichnen von Segmenten. Ich werde nur den Abschnitt einrücken. Das ist die grundlegende for-Schleife, und um zu vermeiden, den Browser zu zerquetschen, lassen wir die for-Schleife für jetzt leer. Aber wir können voran gehen und fügen Sie die Übersetzen und Drehen, die Sie auf jeder Schleife durchgeführt werden möchten. Unterhalb zeichnen Segmente, und immer noch innerhalb der Schleife werden wir eine Übersetzungsmethode hinzufügen, ctx.translate. Ich werde für jede Rotation in die Mitte der Leinwand übersetzen. Wenn wir nicht zuerst übersetzen verwenden, ist der Rotationspunkt der Canvas-Ursprung, der die obere linke Ecke ist. Achten Sie darauf, diese Leinwand hinzuzufügen.width und canvas.height geteilt durch 2. Dann wollen wir eigentlich, dass das Segment gedreht wird. Ich möchte, dass dies bei jeder Schleife um 60 Grad gedreht wird. Denken Sie daran, dass die Verwendung von Rotation im Bogenmaß erfolgt Um also in Grad zu konvertieren, multiplizieren wir den Wert mit Math.Pi dividieren durch 180. Schließlich müssen wir übersetzen erneut aufrufen, um die Position wieder zum Ursprung zu bringen. Wir wollen dies mit negativem 300 übersetzen, und es übersetzt den Ursprung zurück auf 00. Jedes Mal, wenn wir das übersetzen nennen, haben wir keine Probleme. Jetzt können wir voran gehen und den Rest der for-Schleife erstellen. Ich werde nur die for-Schleife [unhörbar] oder wir fügen die Bedingungen hinzu, damit wir nicht in CodePen verknallt werden. Zunächst einmal lassen Sie uns unsere Variable von i gleich Null erstellen, also sind dies die Schleifenstartpunkte. Wir haben bereits ein Segment von der ursprünglichen Funktion auf den Bildschirm gezogen. Lassen Sie uns dies noch fünf Mal wiederholen, indem Sie i weniger als sechs verwenden. Um dies einmal auf jeder Schleife zu erhöhen, verwenden wir i plus plus. Wir können voran gehen und [unhörbar] diese for-Schleife, und dann können wir rennen. Da haben wir es. Das funktioniert also genau, wie wir es wollen. Als eine kurze Zusammenfassung haben wir einen roten Hintergrundkreis mit der Bogenmethode erstellt. Wir haben dann eine Funktion namens Zeichensegmente aufgerufen, und dann zog diese Funktion einen schwarzen Abschnitt auf die Leinwand. Wir umschlossen dann die Funktion mit einer for-Schleife, um den schwarzen Abschnitt fünf weitere Male zu wiederholen, und bei jeder Drehung drehen wir das Segment um 60 Grad, und auch bei jeder Drehung übersetzten wir den Canvas-Ursprung zurück in die Mitte und nicht die Standardposition oben links. Dann übersetzen wir es nach jeder Drehung zurück, damit wir keine Probleme bekommen haben. Das ist ein weiterer kleiner Blick auf das Schleifen mit der Leinwand. Kommen Sie zurück im nächsten Video, wo wir nehmen, was wir gerade gezeichnet haben, und fügen einige Animationseffekte hinzu. 23. Fortgeschrittene Stufe: Animation: Willkommen zurück Jungs. Im letzten Video haben wir diesen Block und das rote Muster erstellt, das Sie auf der rechten Seite sehen können. Wir haben dies erreicht, indem wir einen roten Hintergrund erstellt haben, und dann haben wir eine for-Schleife verwendet, um die Blocksegmente zu zeichnen , und dann schleifen wir sie um und wiederholten sie sechs Mal. In diesem Video gehen wir noch einen Schritt weiter und werfen einen Blick auf die Animation. Insbesondere werden wir einen Blick auf die eingestellte Intervallmethode werfen, die sich öffnen wird, und die Endergebnisse würden ungefähr so aussehen. Es ist nicht wirklich schwer, diesen Effekt zu erzeugen, wenn das eingestellte Intervall verwendet wird. Beginnen wir mit der Erstellung eines eigenen Stifts. Für das letzte Video, und ich werde das animieren nennen, einfach so. Wir können den gesamten Code aus dem letzten Video wiederverwenden. Was wir im Grunde tun werden, ist, den gesamten vorhandenen Code innerhalb einer Funktion zu wickeln und dann diese Funktion in die eingestellte Intervallmethode mit einer bestimmten Zeitverzögerung zu übergeben. Um zu beginnen, müssen wir den vorhandenen Code innerhalb einer Funktion umschließen. Direkt unter unserer Kontakte-Variable, erstellen Sie eine Funktion, und dies werden Sie drehen aufrufen. Dann müssen wir die geschweiften Klammern hinzufügen, also fügen Sie die öffnende geschweifte Klammer hinzu. Dann rechts unten unten, können wir die schließende Klammer hinzufügen, genau hier. Ich bin wieder oben an der Spitze. Wir müssen nur eine oder zwei Zeilen innerhalb dieser Funktion hinzufügen, nur damit es richtig funktioniert. Das erste, was wir tun müssen, ist die Referenzpunkte in der Mitte des Canvas zu erstellen. Lassen Sie uns ctx.translate verwenden. Alles, was wir tun wollen, ist in die Mitte der Leinwand zu übersetzen, genau wie wir es schon oft getan haben. Lassen Sie uns diese in die Klammern einfügen. Jetzt haben wir den Bezugspunkt in der Mitte der Leinwand. Dann wollen wir als nächstes eine Rotationsmethode erstellen. Wir werden jedes Mal um ein Grad drehen, wenn eine eingestellte Intervallmethode aufgerufen wird. Fügen wir einfach Math.Pi dividiert durch 180 hinzu, und dies ist das Äquivalent von einem Grad. Dann, genau wie wir es im letzten Video getan haben, in dem wir übersetzt, gedreht und dann zurück in den Ursprung übersetzt haben, müssen wir eine zweite Übersetzung hinzufügen, um bei jeder Rotation wieder in den Ursprung zu übersetzen. Wir können das gleiche wie die erste tun, aber stattdessen können wir negativ verwenden, nur damit wir zurück zum Ursprung sind. Dies bedeutet oben, kann dann an die richtige Position zu bewegen. Ich werde diesen Code einfach so einrücken. Dann, damit dies tatsächlich funktioniert, verursachen Sie auch tatsächlich die Rotation knapp über der letzten geschweiften Klammer, die für die Rotationsfunktion gilt. Wir müssen das eingestellte Intervall hinzufügen, und dann dauert es zwei Parameter. Die erste ist die Drehfunktion, die erstellt wird. Sie können sehen, dass das wirklich schneller geht. Der zweite Parameter ist die angegebene Zeitverzögerung in Millisekunden. Lassen Sie uns das einfach auf 30 ändern, und wir können es nur ein bisschen verlangsamen. Natürlich kann dies zu Ihnen geändert werden und wenn Sie möchten, dass Sie es bevorzugen. Wechseln Sie zu 300 macht es wirklich langsam, also lasst uns einfach dort ändern. Es ist eigentlich ziemlich einfach, Animationen mit festgelegtem Intervall zu erstellen. Nur um zusammenzufassen, verwenden wir die Zeichnung aus dem letzten Video und umgeben sie innerhalb einer Rotationsfunktion. Wir haben ein, zwei Codezeilen hinzugefügt. Wir begannen mit der Übersetzungsmethode, die sicherstellte, dass sich der Bezugspunkt in der Mitte des Canvas befand. Wir drehen dann um ein Grad, jedes Mal eingestellte Intervall wird aufgerufen, und dann haben wir sichergestellt, dass wir zurück in den Ursprung übersetzt so dass es keine Probleme verursacht jedes Mal, wenn wir in die Mitte bewegen. Dann haben wir die Rotationsfunktion übergeben, um das Intervall zu setzen und dann zu stoppen, dass es von wirklich schnell geht. Wir haben 30 Millisekunden Verzögerung hinzugefügt, nur um die Dinge zu verlangsamen, einfach so. So können wir das eingestellte Intervall verwenden, um eine Animation zu erstellen. Wir gehen nun zum endgültigen Projekt über, oder haben ein wenig Spaß, indem wir ein Micky-Maus-Gesicht zeichnen. Ich seh dich dort. 24. Abschließendes Projekt: Einführung: Also ein herzlicher Glückwunsch von mir, dass ich das Ende dieses Kurses erreicht habe. Also, als ein bisschen Spaß Übung, ich möchte Sie herausfordern, ein Mickey Mouse Gesicht zu zeichnen. Jetzt muss es nicht perfekt sein, die ganze Idee ist nur, Ihnen etwas zum Üben zu geben, was einige der Techniken beinhaltet, die wir während dieses Kurses angesehen haben und es gibt Ihnen auch eine Chance, über Dinge nachzudenken selbst, anstatt mit mir mitzutippen. Das ist es, was ich mir einfällt und das ist es, was ich möchte, dass du kreierst. Also würde ich empfehlen, ein einfaches Mickey Mouse Bild zu finden, nur um es zu kopieren. Ein kleiner Tipp, den Sie vielleicht nützlich finden, ist bevor Sie die Kurven für einen Großteil des Gesichts zeichnen, Sie können es sehr einfach finden, indem Sie einige kleine Bögen als Referenzpunkte erstellen. Zum Beispiel der Start- und Endpunkt einer Kurve, und das mache ich, wenn ich dieses Beispiel erstelle und diese Referenzpunkte zur Hand habe , macht es wirklich viel einfacher, wenn man die Kurven zeichnet. Also gehen Sie weiter und verbringen Sie ein wenig Zeit damit, dies zu replizieren, und machen Sie sich keine Sorgen, wenn Sie mit einem dieser Pfade kämpfen. Denn im nächsten Video zeige ich Ihnen die Lösung, wie ich das erstellt habe. So viel Glück. 25. Abschließendes Projekt: Zeichne Mickey Mouse: Willkommen zurück alle. Ich hoffe, Sie hatten etwas Erfolg mit dieser Herausforderung und teilen, was Sie geschaffen haben, und ich würde sie gerne sehen. Jetzt werde ich Sie durch genau das, was ich getan habe, um das zu schaffen, nur für den Fall, dass Sie irgendwelche Probleme auf dem Weg haben. Das erste, was ich getan habe, war eine Funktion namens AddReferencePoints zu erstellen, und diese Funktion enthielt alle Referenzpunkte, die Sie auf der rechten Seite sehen können. Ich erstelle diese Referenzpunkte, um das Leben ein bisschen einfacher zu machen , wenn die Bögen und auch die Kurven erstellt werden, und aus diesen, die Funktion eins nach dem anderen, so wie wir auf den Kurven weiter unten im Code zeichnen würden. Unten außerhalb der Funktion ist dies der Aufruf der Funktion, alle Referenzpunkte auf dem Bildschirm zu zeichnen, und der Grund, warum alle Referenzpunkte in der Funktion enthalten sind, ist, so dass wir einfach alle kommentieren können der Aufruf der Funktion, wenn wir sie entfernen möchten, einfach so. Ich begann mit der Erstellung einer Linienbreite von drei Pixeln, und dann einen Pfad, und dann bekam ich an der Oberseite des Kopfumrisses zu arbeiten. Wir haben die Bogenmethode verwendet, um die Außenseite des Kopfes an den Start- und Endpunkten zu zeichnen, die wir im Inneren von hier hinzugefügt haben. Dann war das nächste, was ich getan habe, das linke Ohr zu schaffen. Kommentieren Sie diesen Abschnitt einfach aus. Es wurde noch einmal ein Bogen mit 2 mal Math.pi erstellt, um einen vollständigen Kreis zu erstellen. Ich fuhr dann fort, um für das Ohr auf der rechten Seite zu wiederholen. Während Sie dieses Projekt durchlaufen, werden Sie feststellen, dass viele der Koordinaten symmetrisch sind. Wir haben eine Linie in der Mitte, die 300 Pixel ist , so dass viele der Koordinaten auf der linken Seite gleich sind, wie Sie auf der rechten Seite haben, also ist es nur ein Fall, eine Seite zu trainieren, und dann ist es eine Menge einfacher, das gleiche auf der anderen zu erstellen. Dann begannen wir uns innerhalb des Gesichts zu bewegen. Wir haben die Schnittstelle, die der obere linke Bogen und der obere rechte Bogen ist. Sie können sehen, ich habe einen Kommentar gemacht, dass die Koordinaten, auf die wir beziehen, die Punkte 1, 2 und 3 sind, die innerhalb der Funktion oben verfügbar ist. Wir haben diese Punkte zuerst erstellt und sie dann innerhalb der BezierCurveto-Methode hinzugefügt. Im nächsten Schritt erstelle ich die Referenzpunkte für die linke Wange und auch für die rechte Wange. Ich habe bereits erwähnt über die symmetrische Linie, die 300 Pixel quer auf der X-Achse ist. Wir können dann diese Linie verwenden, um sicherzustellen, dass jede Seite des Gesichts gleichmäßig ist. Die linke Wange ist 40 Pixel weniger als 300, die rechte Wange ist 40 Pixel höher, und dies erzeugt einen symmetrischen Effekt. Dann gehe ich dann zum Kinn runter. Um diesen Effekt zu erzeugen, verschieben wir den Stift an die angegebene Position und verwenden dieses Mal eine quadraticCurveto -Methode anstelle einer BezierCurve, einfach weil ein Kontrollpunkt für den Abschnitt reichlich war, und das ist für alle nächsten -Abschnitt. Dieser Teil ist die Kurve, die über der Nase sitzt, und die Augen ruhen oben. Auch da dies eine einfache Linie ist, haben wir eine quadraticCurve verwendet, und jetzt haben wir diese Kurve. Wir haben jetzt eine Position, um an den Augen zu arbeiten, also die linke, auf das rechte Auge, haben wir gerade die nächsten hinzugefügt, und das sind die Umrisse. Ich habe eine Ellipsenmethode verwendet, die wir in diesem Kurs noch nicht angesehen haben, aber es macht es viel einfacher, als zu versuchen, eine bestimmte Art von Kurve zu verwenden, um dies zu erstellen. Ich habe in den obigen Parametern hinzugefügt, wenn Sie sich diese ansehen möchten. Wir haben ein x- und y-Zentrum, genau wie bei der Verwendung eines Bogens. Wir haben den x- und y-Radius, also ist der Radius die Hauptachse, und der y-Radius ist die Nebenachse. Wir können der Ellipse auch eine Rotation hinzufügen, dies ist im Bogenmaß. Wir sind dann der Start und EndAngle, und sie haben am Ende einen optionalen Parameter, wenn wir wollen, dass er im Uhrzeigersinn oder gegen den Uhrzeigersinn gezeichnet wird. Das sind die Umrisse der Augen. Wir verwenden dann die gleiche Ellipsenmethode, um die Nase zu zeichnen, und dann gehen wir zurück zum quadratischen CurveTo, zum Bogen für den Mund. Es gibt zwei verschiedene Bögen, die wir erstellen werden. Einer ist der obere Teil des Mundes und dann haben wir den unteren Teil des Mundes. Um der Zunge etwas Detail hinzuzufügen, erstellen wir zwei weitere quadratische Curvetos, um den Zungeneffekt innerhalb des Mundes zu verleihen. Dann war das nächste, was ich getan habe, eine Kurve nur bis zum Ende jedes Abschnitts des Mundes zu erstellen , genau so. Alle diese Elemente haben den Stricheffekt, so dass wir den Strich hinzufügen, direkt am unteren Rand von all diesen. Dann müssen wir einen neuen Weg beginnen, und der Grund, warum wir das tun müssen, ist, weil alle Elemente von hier haben eine Füllung statt einen Strich. Zunächst einmal haben wir das linke Auge, und wieder verwenden wir die Ellipsenmethode, aber dieses Mal haben wir ein wenig Winkel hinzugefügt nur um den Effekt zu erzeugen, den wir suchen. Wir haben dann auf der rechten Seite für das rechte Auge wiederholt und dann alle mit der Filmmethode ganz am Ende auf die Leinwand gezogen. Dann schließlich haben wir etwas Text ganz am Ende hinzugefügt, nur mit den Worten von Mickey Mouse, und wir haben einige grundlegende Ausrichtungen und auch einige Schriftarten und Farbfüllungen hinzugefügt. So erstelle ich mein Mickey Mouse Gesicht und erinnere mich an Nummer, dass es keinen richtigen oder falschen Weg gibt, dies zu tun. Jeder nimmt verschiedene Ansätze an, aber die Hauptsache ist, dass Sie es schaffen, etwas zu zeichnen, das Mickey Mouse ähnelt. Das ist es für das Ende dieses Projekts. Bitte teilen Sie das, was Sie erstellt haben. Danke fürs Zuschauen und Tschüss vorerst. 26. Vielen Dank: Vielen Dank, dass Sie sich mir auf diesem Kurs angeschlossen haben. Ich hoffe, Sie haben es genossen und hoffen, dass Sie viel davon gelernt haben. Wir haben so viel Boden bedeckt, einschließlich der Einrichtung der Leinwand. Wir haben uns dann grundlegende Skripterstellung zum Zeichnen von Formen wie Rechtecken angesehen. Wir haben darüber nachgedacht, wie man die Canvas-Koordinaten versteht. Wir haben auch Linien und Pfade untersucht und wie wichtig es war, bis zu Pixeln zu marschieren, um scharfe Linienränder zu erzeugen. Wir haben uns verschiedene andere Techniken angesehen, wie Ecken und Meter, Bögen und Kreise. So fügen Sie Text zum Canvas und auch Verläufe hinzu. Wir beendeten den Abschnitt „Canvas“, indem Bilder zur Leinwand und auch Schwenk- und Schattenseiten hinzugefügt haben. Wir gingen dann ein wenig weiter, indem wir zum nächsten Abschnitt weitergingen, wo wir uns verschiedene Arten von Kurven ansehen, wie Bézier- und quadratische Kurven. Wir haben auch die Speicher- und Installationsmethoden und wie sie richtig verwendet werden. Zusammen mit verschiedenen Transformationen wie Skalierung, Drehen und Translieren. Sie sollten nun verstehen, wie Sie mit Pixeln arbeiten und wie Sie auf die Pixeldaten eines Bildes zugreifen, und dann diese Pixeldaten verwenden, um das Bild zu manipulieren , um Effekte zu erzeugen, z. B. ein Bild in Graustufen zu konvertieren. Wir haben auch untersucht, wie Looping repetitive Jobs viel einfacher machen kann und wie wir unsere Zeichnungen animieren können, um sie wirklich zum Leben zu erwecken. Dann hoffentlich, am Ende des Kurses, können Sie etwas Erfolg haben, wir greifen auf Mickey Mouse Gesicht, um alles, was Sie aus dem Kurs gelernt haben, in die Praxis umzusetzen. Also für mich, tschüss vorerst, und hoffentlich sehe ich dich im zukünftigen Kurs wieder. 27. Folge mir auf Skillshare: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und haben etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Kurse hier auf Skillshare überprüfen. Folgen Sie mir auch für alle Updates und auch um neue Klassen informiert zu werden, sobald sie verfügbar werden. Also nochmals vielen Dank. Viel Glück. Hoffentlich sehe ich dich wieder in einer zukünftigen Klasse.