Zacznij od HTML Canvas

Feb 3, 2026
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

Jak - Najpopularniejsze artykuły

7 najlepszych wskazówek na rozpoczęcie własnego biznesu

Jak Feb 3, 2026

Jeśli czułeś się utknął w kreatywnej koleinie, warto mieć chwilę, aby wziąć udział w swojej karierze i zdecydować, gd..

Jak utworzyć animowany efekt pisania

Jak Feb 3, 2026

Kiedy używany dobrze, Animacja CSS. może dodać zainteresowanie i osobowość do swojej witryny. W tym artykule przejdziemy przez to, jak stworzyć a..

Zbuduj animowany podzielony na ekranie Page

Jak Feb 3, 2026

Twoja strona docelowa jest kluczowym elementem Układ strony internetowej. . Jest to pierwsza prawdziwa okazja, kt..

4 Wskazówki dotyczące rozwijania umiejętności deweloperów

Jak Feb 3, 2026

(Kredyt obrazu: Robert Pizzo) Superfriendly Dyrektor Dan Mall będzie dzieli się swoimi wskazówkam..

Jak przekazać dźwięk w obrazie

Jak Feb 3, 2026

Chociaż nie jest możliwe pokazanie dźwięku w konwencjonalnym, nieruchomym obrazie (interaktywność multimedialna na bok), mo..

Utwórz plik kinowy z Photoshopem w 60 sekund

Jak Feb 3, 2026

Szkoda, że ​​nie możesz odebrać nowej umiejętności, ale nie mogę znaleźć czasu, aby usiąść i uczyć się? Adobe's. Zrób teraz listę odtwarzania może być po p..

Odkryj zachęcanie i jak najlepiej wykorzystać

Jak Feb 3, 2026

Nakładanie to A. Technika malarstwa Popularne w renesansie, w którym tworzysz monochromatyczne świadczenie tona..

Najlepsze wskazówki dotyczące malowania ekspresyjne ręce

Jak Feb 3, 2026

Ręce są prawdopodobnie najtrudniejszym elementem anatomii Jak malować , jeszcze bardziej, gdy muszą przekazać..

Kategorie