Czy dzisiaj (rok 2023) "wypada" jeszcze używać elementu canvas do generowania prostych grafik? A może są lepsze rozwiązania?
0
0
No a masz jakiś inny sposób żeby dynamicznie wyrenderować grafikę rastrową?
Są biblioteki które na tym silnie polegają.
2
Pytanie, co chcesz zrobić dokładnie.
Niektóre rzeczy, które można określić "prostą grafiką" da się zrobić bądź to w HTML/CSS bądź w SVG (grafika wektorowa) i rozwiązania oparte o canvas są często nieadekwatne. Ludzie myślą, że jak coś jest kolorowe albo nie jest tekstem, to trzeba to robić od razu na Canvas, a nie zdają sobie sprawy z możliwości zwykłego DOM.
Jeśli grafika natomiast jest nieco bardziej zaawansowana, to warto sięgnąć po WebGL (zapewne używając biblioteki do tego jak np. Pixi(do 2D) czy Three(do 3D), żeby samemu tego nie pisać od zera). To też działa na elemencie <canvas>, tylko że na innym kontekście.
No a masz jakiś inny sposób żeby dynamicznie wyrenderować grafikę rastrową?
Ja widzę problem w tym, że ludzie myślą, że ich problem jest natury rastrowej tylko dlatego, że jednym z jego elementów są kolorowe grafiki (niekoniecznie w tym przypadku, ale ogólnie).
A może są lepsze rozwiązania?
ja to widzę tak:
- HTML + SVG - grafiki wektorowe (być może z elementami grafiki rastrowej), gdzie zależy ci na silnej interakcji z resztą strony. Jeśli robisz coś interaktywnego, gdzie jednak grafika jest w miarę prosta (tzn. może być bardziej skomplikowana, ale w sensie wektorowym, a nie rastrowym)
- Canvas (kontekst 2D) - przydaje się do prototypowania (np. gier) albo właśnie do
generowania prostych grafikjak napisałeś. Tyle, że tutaj wiele rzeczy musisz robić od zera (w porównaniu z HTML czy SVG) - biblioteki oparte na WebGL (czyli też Canvas, ale całkowicie inne API) - jeśli masz większe potrzeby w zakresie grafiki, jakieś efekty, shadery, albo np. grafikę 3D chcesz zrobić. Albo chcesz wyświetlić dużo elementów naraz (zależy ci na wydajności)
- czysty WebGL - wysoki próg wejścia, odradzam na początek. Jednak jak już znasz, to jeśli chcesz zrobić albo coś zaawansowanego, customowego (np. własny silnik), albo jeśli chcesz zrobić coś minimalistycznego np. prostą gierkę bez zależności
0
Jakiś czas temu zrobiłem taką gierkę https://github.com/andrzejlisek/Roulette i symulator https://github.com/andrzejlisek/TriStateLogic .
Początkowo te dwa projekty zrobiłem z użyciem canvas, bo wydawało mi się tak najprościej, potem obsłużyć kliknięcie na powierzchni. Na podstawie współrzędnych i logiki można wyczuć, co było kliknięcie i odpowiednio zareagować. Problem pojawił się dopiero, gdy uruchomiłem apkę na telefonie. Bitmapa była wyświetlana w dużo niższej rozdzielczości niż wyświetlacz telefonu, przez co małe elementy były rozmyte. Na komputerze, zarówno canvas, jak i SVG, były wyświetlane równie wyraźnie i prawidłowo.
Jak przerobiłem projekt na użycie SVG, to obraz na telefonie również był wyraźny. Domyślnie, wirtualna rozdzielczość przeglądarki jest dużo niższa niż rozdzielczość wyświetlacza telefonu.
0
andrzejlisek napisał(a):
Domyślnie, wirtualna rozdzielczość przeglądarki jest dużo niższa niż rozdzielczość wyświetlacza telefonu.
Można to zmienić https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
Bitmapa była wyświetlana w dużo niższej rozdzielczości niż wyświetlacz telefonu, przez co małe elementy były rozmyte.
No i zwróć uwagę, że rozmiar canvasa od strony JSa (canvas.width, canvas.height) może być inny niż rozmiar canvasa na stronie (canvas.style.width, canvas.style.height). możesz np. wyświetlać coś w większej rozdzielczości, ale zostanie to przeskalowane.
Można też spróbować wyłączyć antialiasing (szczególnie jeśli zależy nam na efekcie pixel artu, to wtedy antialiasing może być wkurzający, bo będzie rozmywać wszystko) https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
jeszcze może mieć znaczenie gęstość pikseli (window.devicePixelRatio). Tu jest napisany tip, jak można to skalować:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#scaling_for_high_resolution_displays
Jak przerobiłem projekt na użycie SVG, to obraz na telefonie również był wyraźny. Domyślnie, wirtualna rozdzielczość przeglądarki jest dużo niższa niż rozdzielczość wyświetlacza telefonu.
I dobrze, bo do tego typu gier canvas wcale nie jest ani potrzebny ani specjalnie wygodny. W końcu to po prostu prostokąty, kółka, przyciski i tekst. Łatwiej to zrobić w HTML i SVG i mieć z automatu interaktywność, stylowanie, pozycjonowanie...
0
A pytam, bo robię właśnie grę typu "odbijaj piłeczkę". Na razie mam canvas + requestAnimationFrame(). Pytanie czy są "lepsze" technologie.
0
A czy masz jakieś problemy z tym podejściem teraz?
0
Póki co git nie licząc tego, że współrzędne wewnątrz canvas trzeba skalować przez 1/2.
2
Canvas jest jak najbardziej używane, ale raczej do skomplikowanych grafik, niż do prostych. Najbardziej zaawansowane i 'zarombiste' efekty 3D na stronach internetowych robi się w Three.js, które bazuje właśnie na canvas. Od niedawna zacząłem działać w tej bibliotece i muszę przyznać, że jest świetna, fajna i bardzo satysfakcjonująca. Obecnie pracuję nad sklepem dla firmy sprzedającej napoje w puszkach i robię efekt obracającej się puszki przy scrollowaniu. Proste geometryczne kształty - kwadraty, koła, półkola, trójkąty można robić w czystym html + css i nakładać je na siebie tworząc kształty. Bardziej skomplikowane kształty 2D, takie jak fale, robi się raczej w svg.
Jeśli chodzi o wymiary canvas, to często stosowaną praktyką jest dodanie width i height bazującego na rozmiarze ekranu użytkownika przy ładowaniu strony i przy resize. Często jest to po prostu window.innerWidth i window.innerHeight. Wtedy canvas zajmuje zawsze cały ekran i problem z głowy. Jeśli canvas ma być używane przez pewien czas na stronie, np. podczas scrollowania do połowy strony, to position: sticky robi robotę.