JavaScript- un mit HTMLanvas

Hallo und willkommen zurück zu einer weiteren spannenden Folge meiner Erfahrungen mit Wes Bos‘ JavaScript30! Das war wahrscheinlich der größte Spaß, den ich bisher mit dem Kurs hatte! Nachdem ich mit dieser Herausforderung begonnen hatte, entschloss ich mich schnell, mit Wes zu programmieren, anstatt zu versuchen, es selbst herauszufinden, da ich völlig überfordert war. Ich habe noch nie mit Canvas gearbeitet und es gab viele Syntaxen, die ich nicht verstand. Könnte ich möglicherweise meine eigene Version eines Etch-a-Sketch in einem Browser erstellen? Ja, sicher, das konnte ich herausfinden, aber nachdem ich gesehen hatte, was er als fertiges Produkt wollte, trat ich einen Schritt zurück.

Was haben wir also gemacht? Im Grunde haben wir einen Etch-a-Sketch in HTML5 Canvas erstellt. Der größte Unterschied bestand darin, dass sich beim Zeichnen die Farben und die Größe der Linie ständig änderten. Ich werde nicht lügen ... wie wir das geschafft haben, verstehe ich immer noch nicht ganz. Aber ich habe eine ziemlich gute Idee.

Wie Sie auf dem Bild oben sehen können, haben wir am Ende ein äußerst farbenfrohes Design erhalten, auch wenn es nicht im Geringsten praktisch ist. Im Grunde scheint es, dass Canvas mehr oder weniger „Farbe“ ist, aber mehr Verwendungsmöglichkeiten bietet. Ich weiß nicht wirklich, wann ich es in Zukunft für irgendwelche Projekte verwenden werde, aber insgesamt hat es trotzdem Spaß gemacht.

Oh, und etwas über HSL zu lernen war auch cool! Er brachte uns zu Mother Effing HSL, damit wir mehr über Farbtöne und Farben erfahren konnten. Ich würde auf jeden Fall empfehlen, diese Website zu besuchen, um zu sehen, wie Sie mit der Farbpalette herumspielen können. Wir haben dies genutzt, indem wir es direkt in unserem Code aufgerufen und beim Zeichnen auf der Seite inkrementiert haben.

      let isDrawing = false;
      let lastX = 0;
      let lastY = 0;
      let hue = 0;
      let direction = true;

      function draw(e) {
        if (!isDrawing) return;
        console.log(e);
        ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
        hue++;
        if (hue >= 360) {
          hue = 0;
        }
        if (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) {
          direction = !direction;
        }
        if (direction) {
          ctx.lineWidth++;
        } else {
          ctx.lineWidth--;
        }
      }

Sie können auch sehen, wie wir die Größe der Linie selbst geändert haben, indem wir die Richtung geändert haben, in der sie basierend auf der Bewegung der Maus entweder erhöht oder verringert wird. Eine Zeile des Codes verwirrt mich immer noch, allein aufgrund der Tatsache, wie viel tatsächlich vor sich geht. Das heißt, wenn (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) {
Richtung = !Richtung;. Diese ganze Zeile ist für mich verrückt. Meistens, weil es so konzipiert ist, dass es sich nach Erreichen einer bestimmten Menge umdreht. || verwirrt mich auch immer noch und ich bin nicht überzeugt davon, wie oder warum Sie a verwenden würden ! in JavaScript. Ich werde mich näher damit befassen, nachdem ich diesen Beitrag geschrieben habe, aber wenn mir jemand eines dieser Konzepte etwas näher erklären könnte, wäre ich sehr dankbar.

Während dieser Herausforderung hatte ich noch eine weitere ziemlich große Offenbarung. Das wäre die Verwendung von Semikolons beim Schreiben von JavaScript. Ich habe das wirklich noch nie gemacht, obwohl es mir vorgeschlagen wurde. Ich dachte, dass es ausreichen würde, einfach eine Zeile zu beenden und mit einer neuen Zeile fortzufahren. Ich weiß, dass man in CSS Semikolons verwenden muss und dass sonst alles so funktioniert, wie man es möchte. Dies war das erste Mal, dass ich ein Problem mit JavaScript hatte, weil ich es nicht verwendete. Da nach ctx.Stroke() kein Semikolon stand, ist mein Code im Grunde kaputt gegangen. Okay, es hat immer noch funktioniert, aber definitiv nicht wie beabsichtigt. Aus irgendeinem Grund stieß es auf die folgende Codezeile, aber das Semikolon hat das vollständig behoben. Lektion gelernt.

Alles in allem war das eine lustige Herausforderung. Es hat mir großen Spaß gemacht, mit HTML5 Canvas herumzuspielen, auch wenn ich in Bezug auf alles, was man damit machen kann, kaum an der Oberfläche gekratzt habe. Ich habe länger in meinem Browser gezeichnet, als ich hätte tun sollen, und bin auch zurückgegangen und habe mit einigen Werten herumgespielt (z. B. wie sich der Farbton erhöhen würde, der maximalen Breite der Linien usw.), nur um zu sehen, was passieren würde. Ich könnte das wahrscheinlich nicht alleine nachbilden, wenn ich es versuchen würde, aber ich bin immer noch so fasziniert davon, was man mit ein paar Zeilen JavaScript machen kann!

Das ist alles für die heutige Herausforderung. Wenn Sie die Zeit haben, würde ich Ihnen wärmstens empfehlen, es selbst auszuprobieren, da es bei weitem der größte Spaß war, den ich bisher hatte! Halten Sie Ausschau nach meiner nächsten Ausgabe von JavaScript30 mit: 14 Dev-Tools-Tricks, die man kennen muss!

Das obige ist der detaillierte Inhalt vonJavaScript- un mit HTMLanvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!