Zacznij od HTML Canvas

Sep 12, 2025

Jak

HTML Canvas & GT; Element to potężne rozwiązanie do tworzenia grafiki opartej na pikselach w sieci Javascript. i pozwoli ci stworzyć niezwykłe efekty z odrobiną praktyki.

W tym samouczku zajmiemy się tworzeniem obiektu na płótnie, rysujemy proste wizualizacje i animowanie tych wizualizacji.

01. Utwórz stronę

Płótno jest zasadniczo elementem HTML, który umieścisz na stronie, skala, aby pokryć żądany obszar i może następnie narysować. Aby rozpocząć, musimy utworzyć prostą stronę z obiektem na płótnie.

 i LT;! DocType HTML & GT;
& lt; html & gt;
  & lt; Head & GT;
  & LT; Meta CharSet = 'UTF-8' / & GT;
  & lt; tytuł HTML Canvas Demo & Title & GT;
  & LT; link rel = 'style arkuszu' href = 'custom.css' / & gt;
  & LT; Script SRC = "Canvas.js" & GT; & LT; / Script & GT;
  & LT; / Head & GT;
  & lt; body & gt;
  & LT; Canvas Id = "HTML-Canvas" & GT;
  & lt; / body & gt;
& lt; / html & gt;

02. Skala płótno

Aby dać nam dużo miejsca do zabawy, chcemy, aby nasz płótno wypełnić cały ekran. Damy również na czarnym tle, więc wiesz, że jest na pewno tam. Może to być trochę trudne, aby zrobić bez zakończenia przewijania barów lub białej przestrzeni. Poniższy CSS powinien się tym zająć.

 płótno {
  Wysokość: 100VH;
  Szerokość: 100vw;
  pozycja: absolutna;
  kolor-kolor: # 000000;
}
  Marża: 0;
  Wyściółka: 0;
}

03. Zainicjuj płótno do użycia

Następnie musimy dodać jakiś JavaScript, aby skonfigurować płótno gotowe do użycia. Będziemy mieć haczył zdarzenie domcontentored, aby zapewnić, że skrypt nie próbuje uruchamiać, zanim element płótna jest gotowy. Będziemy również umieścić rozdzielczość na płótnie, aby pasowała do obszaru, które obejmuje, w przeciwnym razie płótno będzie skalować bez rosnącej rozdzielczości, prowadząc do rozmytych lub pikselowanej grafiki.

 Document.addeventlistener ("DomcontentLoaded", Funkcja () {
  var canvas = dokument.getElementbyd ("HTML-Canvas");
  var koła = [];
  var promień = 50;
  płótno.width = płótno.Clientwidth;
  płótno.Height = canvas.clientheight;
  var Context = Canvas.getContext ("2d");
}, false);

04. Narysuj kształt

Zauważysz, że w ostatnim kroku kręciliśmy coś zwanego "kontekstem". W ten sposób występuje rysunek na płótnie. Najłatwiej jest myśleć o kontekście jako pędzla, którego możemy użyć do rysowania różnych linii, łuków i podstawowych kształtów.

Co możemy teraz zrobić, aby użyć naszego kontekstu, pisząc funkcję drawcyroli, która utworzy 360-stopniowy łuk - to jest koło. Robimy to, opowiadając kontekstowi, aby zdefiniować łuk, ustawić style dla granicy i wypełnienia, a następnie wzrośnie funkcje wypełnienia () i udaru (), aby faktycznie rysować kształt (skok rysuje granicę).

 Funkcja Draphy (X, Y, Radius, Granica, Border_Colour, Fill_Colour)
  {
  kontekst.beginpath ();
  kontekst.ARC (X, Y, RADIUS, 0,2 * MATH.PI);
  kontekst.strokestyle = border_colour;
  kontekst.Fillstyle = Fill_colour;
  kontekst.linewidth = granica;
  kontekst.Closepath ();
  kontekst.fill ();
  kontekst.stroke ();
  }

05. Utwórz wiele kół

Świetny. Mamy funkcję, która może rysować koła. Teraz potrzebujemy czegoś do narysowania. Rozszerzmy kod z kroku 3, aby utworzyć tablicę opisującą obiekty koła. Przechowuje każde współrzędne koła kółko, kolor i wartość kierunku.

Tworzymy tę tablicę, a nie tylko rysowanie kręgów od razu, ponieważ umożliwi nam animowanie kółek, ponownie przyciągając zawartość tablicy później.

 Dla (Var I = 0; I & LT; I ++) {
  var x = RADIUS + (math.random () * (płótno.width - (2 * promień)));
  var y = RADIUS + (math.random () * (płótno.Height - (2 * RADIUS)));
  var color = randomcolour ();
  var kierunek = math.random () * 2.0 * math.pi;
  kółki.push ({x: x, y: y, kolor: kolor, kierunek: kierunek});
  remis(); }

06. Randomiseise Color

W ostatnim kroku użyliśmy kilku nowych funkcji, które nie zostały jeszcze zdefiniowane. Zacznijmy od Randumbolour (). Będzie to funkcja użyteczności, która zwraca randomizowane sznurki szesnastkowe reprezentujące kolor. To dość proste, aby wdrożyć.

 Funkcja Randumcolour () {
  var chars = '0123456789abcdef';
  var color = '#';
  dla (var i = 0; i + i ++) {
  kolor + = znaki [Math.floor (math.random () * 16)];
  }
  Kolor zwrotu; }

07. Narysuj grafikę na stronie

Teraz jesteśmy gotowi przynieść rzeczy razem, wdrażając funkcję Draw (). To zrobi dwa kluczowe rzeczy. Po pierwsze, spowoduje, że płótno za pomocą funkcji ClearRect (). Będzie to ważne, gdy przyjdziemy animować nasze kręgi, aby uniknąć rysowania nowej ramki na szczycie starego. Wtedy ITERUSE przez tablicę zbudowaliśmy i narysowaliśmy każde koło na płótnie w kolejce przy użyciu naszej funkcji drawcyrcle.

 Funkcja Draw () {
  context.cleARrect (0, 0, płótno.width, płótno.Height);
  Kręgi.Forach (funkcja (Circle) {
  drawcircle (Circle.x, Circle.y, Radius, 5, Circle.Colour, Circle.Colour);
    }); }

08. Animuj kształty

Jeśli spróbujesz teraz, zobaczysz kilka statycznych kręgów pomalowanych na stronie. Ale chcemy ich animacjować. Aby to zrobić, musimy rozszerzyć naszą funkcję remisu () na kilka sposobów. Po pierwsze, użyjemy wartości Circle.direction, wszedliśmy do tablicy, aby obliczyć zmiany w pozycji X i Y dla okręgu.

Następnie użyjemy wbudowanej funkcji o nazwie CorneganiMationFrame, która rekurencyjnie wywołuje funkcję Draw (). ŻądanieFrameFrame umożliwia przeglądarkę, kiedy ponownie zadzwonić do funkcji, unikając konieczności wdrożenia timerów do obliczenia, gdy wyciągnąć następną klatkę.

 Funkcja Draw () {
  context.cleARrect (0, 0, płótno.width, płótno.Height);
  Kręgi.Forach (funkcja (Circle) {
  Circle.x = Circle.x + math.cos (Circle.direction);
  Circle.y = Circle.y + math.sin (Circle.direction);
  drawcircle (Circle.x, Circle.y, Radius, 5, Circle.Colour, Circle.Colour);
  });
  prośbacjaFramyFrame (rysowanie);
  }

09. Odbij się na skraju strony

Jedna rzecz nadal brakuje. Kręgi po prostu znikają z krawędzi ekranu. Zróbmy je odbijać. Aby to zrobić, dodamy połączenie do nowej funkcji, Bounce (Circle), w pętli Foreach w funkcji Draw ().

Funkcja odbicia określi, gdy okrąg znajduje się na krawędzi ekranu i odpowiednio dostosuje swoją wartość kierunkową.

 Funkcja Bounce (Circle) {
  Jeśli (((Circle.x - Radius) i 0) || ((Circle.y - RADIUS) & LT; 0) || ((Circle.x + Radius) & GT; Canvas.width) || ((Okrąg. y + promień) & gt; canvas.height)) {
  Circle.direction + = (math.pi / 2);
  }
  Jeśli (Circle.Direction & GT; (2 * math.pi)) {
  Circle.direction - = (2 * math.pi);
  }
}

Ten artykuł pierwotnie pojawił się Projektant stron internetowych wydać 266. Kup tutaj tutaj.

Powiązane artykuły:

Utwórz cyfrowy element nakreślenia za pomocą płótna
Wszystko, co musisz wiedzieć o nowym węzła.js 8
Jak wyeksportować After Effects Animations do HTML5

Zacznij od HTML Canvas

01. Utwórz stronę

02. Skala płótno

03. Zainicjuj płótno do użycia

04. Narysuj kształt

05. Utwórz wiele kół

06. Randomiseise Color

07. Narysuj grafikę na stronie

08. Animuj kształty

09. Odbij się na skraju strony

Jak - Najpopularniejsze artykuły

Przeglądaj wizualizację danych z p5.js

Jak obrócić dzień w nocy w Photoshopie

Designer powinowactwo: Jak korzystać z narzędzi do pióra

Jak narysować duży kot z pastelem

Zacznij od rdzy

Jak symulować eksplozje w Majowie

Utwórz tapetę Low Poly w C4D

Jak wziąć swoje logo wektorowe z 2D do 3D

Kategorie