Przyciski w canvas

Question

Tak jak w temacie, czy wie ktoś może jak w canvas wyświetlić przyciski, tak aby były w pełni funkcjonalne oraz jak wyświetlać w canvas divy (jeśli jest to wogóle możliwe), niestety dopiero zaczynam z canvas i nie wiem jak to zrobic :(

Wiem że canvas wyświetla obrazy, można ją odświeżać, animować itd... chodzi o to że chciałbym, np. kliknąć w przycisk, który jest w canvas i po jego kliknięciu wyświetlił się równiez w canvas div z jego zawartoscia.

Answer 1

Możesz narysować prostokąt, nanieść na niego tekst i sprawić, że będzie wyglądał jak button - następnie pobierasz pozycję kursora względem krawędzi canvasu i po kliknięciu w canvas sprawdzasz, czy pozycja 'buttona' i kliknięcie użytkownika na siebie nachodzą - dzięki temu możesz stworzyć coś na kształt kliknięcia buttona. Jednak żaden tag w rodzaju "button" nie pojawi się w html-u. Takie rozwiązanie sprawdzi się co najwyżej w jakiejś gierce HTML5.

Canvas działa jak Paint na Windowsie - rysujesz coś, możesz następnie wyczyścić pole, lub narysować coś na wcześniejszej powierzchni. Nie znajdziesz tam żadnym tagów html - możesz tylko namalować "zawartość diva" na warstwie buttona - przykrywając go.

Możesz też utworzyć obok tagu canvas element div z jakąś zawartością, nadać mu coś w rodzaju "display: none" i dopiero po kliknięciu w button w canvasie nadawać mu z poziomu Js-a "display: block".

Nie wiem dokładnie co chcesz zrobić.

Comments

Sprawa wygląda tak że, zamierzam napisać jakąś gierkę na przeglądarce właśnie m.in. w html5 jak patrzyłem to takie gry jak np. agar.io, diep.io itp. wykorzystują canvas, a np. w takim diep.io ulepszasz statystyki klikając w przycisk po zdobyciu określonej liczby punktówni to wszystko dzieje się w canvas za pomocą skryptu JavaScript, a ja niestety jestem totalnie zielony z canvas, a w JS już coś robiłem i wiem jak on działa ^^

Więc podsumowujac zamierzam stworzyć grę w canvas, w której jest interakcja m.in. z buttonami, klawiszami na klawiaturze (to już umiem) i zobaczy się co jeszcze ;)

---

No to tak jak z wszystkim - najlepiej zacznij od początku. Najpierw zobacz jak się ustawia kolor i grubość linii, potem zacznij rysować ścieżki, kształty i sprawdź dodawanie tekstów. Działa to wszystko w ten sposób, że rysujesz coś - a następnie rysujesz na tej powierzchni nową rzecz (lub zmazujesz i rysujesz) a jeśli chcesz dodać animację, to rysujesz kształt i w pętli co kilka sekund kolejno przesuwasz pozycję - zmazujesz - przesuwasz pozycję i rysujesz - zmazujesz. 

Ja zaczynałem z tego tutoriala i zawsze będę polecał, powinien Ci naświetlić jak to wszystko działa. 

Później możesz się zainteresować takim narzędziem jak "Phaser" - ale najpierw raczej naucz się rysować proste kształty. 

---

@EteerYT, zainteresuj się programem construct 2, możesz tam wyexportować canvas w dokumencie html i oddzielnie nanieść inputy które będą powiązane z logiką przypisaną do elementów w canvas, jest integracja JS itd.. polecam

---

Ja już zrobilem 16 godzinny poradnik do canvas na kursownik.pl (robił asteroids i bombermena, ale bardzo mało w bombermenie zrobił) i szczerze powiem nie za bardzo rozumiem pewne rzeczy np. żeby animacja wykrywała kolizję z innym obiektem (według mnie zanim się animacja poruszy powinno się sprawdzać czy przed nią nie jest jakiś obiekt z którym powinna być kolizja no i jesli jest to się nie poruszy a jeśli nie ma to wiadomo, ale problem w tym że nwm jak zrobić aby obiekt poruszał się o 1 kratkę bo x i y w danym obiekcie jest obliczany w lewym goryng rogu obrazka, a nie od lewego górnego rogu do prawego dolnego :/ )

Chętnie przestudiuje poradniki związane z takimi rzeczami ;), i dzięki za link do poradnika chętnie go obczaje. ^^