<canvas> pozbycie sie pikseli, efekt rozmycia, wygładzanie krawędzi - da się ?

pytanie zadane 28 czerwca 2016 w JavaScript przez String Gaduła (4,520 p.)
edycja 29 czerwca 2016 przez String

Witam :)
Kiedy rysuję cokolwiek na canvasie wszystko jest super extra do czasu, gdy nie zacznę rysować linią np. 1px.
Wówczas nie jest to taka płynna, ładna linia, ale pikselowate coś, co nie wygląda estetycznie.
Da się to jakoś dopieścić ?
Na tej stronie: https://sketch.io/sketchpad/ rysując kreskę, okrąg 1px-em czuć efekt jakiegoś wygładzenia. Ta linia tutaj jest po prostu idealna.
Można by to porównać do tego jak okrąg rysują dwie osoby: jednej z nich trzęsie się ręka ( efekt jak na canvasie, pełno brzydkich pikseli ) a druga osoba posiada ogromne doświadczenie ii okrąg od ręki wygląda jak od cyrkla ( na sketch.io).
Jestem mega ciekawy rozwiązania takiego problemu.

Tak dla zobrazowania:
a tutaj z poradnika od Comandeera. Coraz bliżej efektu końcowego, ale jak widać cały czas coś brakuje ;/

4 odpowiedzi

odpowiedź 29 czerwca 2016 przez Comandeer Guru (601,110 p.)
wybrane 29 czerwca 2016 przez String

Najlepsza

http://perfectionkills.com/exploring-canvas-drawing-techniques/

komentarz 29 czerwca 2016 przez String Gaduła (4,520 p.)

Tak rzuciłem tylko okiem, bo mam mało czasu i wydaje mi sie że znajde tu to czego oczekuje. Super poradnik. I ogólnie rzecz biorąc, gdy będę miał z czymś problem jestem zmuszony do przeszukiwania stron pisanych po ang.. Dobrze bo będę ćwiczył jezyk ale z drugiej strony szkoda ze tak malo jest takich rzeczy po polsku. Dzieki wielkie za linka pozdrawiam :)

komentarz 29 czerwca 2016 przez String Gaduła (4,520 p.)

Sprawdziłem wszystko dokładnie i z tego poradnika najlepsza jakość prezentuje użycie tzw. krzywej Beziera. Ale to w ciągu dalszym nie jest to, co na tej stronie, którą podałem ;/
Na sketchpadzie, gdy narysujemy trójkąt rozwartokątny(koniecznie energicznymi ruchami) to przy wierzchołku przy największym kącie aplikacja nawet lekko zaokrągla krawędź ;o
A w źródle strony nigdzie nie mogę znaleźć co oni tam zastosowali ;/

komentarz 29 czerwca 2016 przez Comandeer Guru (601,110 p.)

Hmm… http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html#linecap + http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html#linejoin ?

komentarz 29 czerwca 2016 przez String Gaduła (4,520 p.)

linecap i linejoin zastosował właśnie Juriy Zaytsev.
A czym jest ta słynna technika z połówką piksela?
Chodzi o ctx.translate(0.5,0.5) ?
W moim przypadku to tylko pogarsza sytuacje gdyż im dalej rysuję tym dalej mi odjeżdża kursor. Chyba że w złym miejscu to umieściłem.

komentarz 29 czerwca 2016 przez Comandeer Guru (601,110 p.)

Chodzi mi o coś takiego: http://jsfiddle.net/9bMPD/357/

komentarz 29 czerwca 2016 przez String Gaduła (4,520 p.)

A tutaj jest użyty gradient, tak?
Juriy również z tego korzystał, jednak dalej to nie to. :D

odpowiedź 29 czerwca 2016 przez Ehlert Ekspert (212,670 p.)

Tak, bo rysujesz jednym kwadratowym pikselem. Załaduj na stronę w formie img taki obrazek:

I rysuj nim skalując go do odpowiednich rozmiarów. Oczywiście alpha obecna, czyli png.

komentarz 29 czerwca 2016 przez Comandeer Guru (601,110 p.)

Przekombinowane niesamowicie. Jest wiele innych sposobów, w których nie trzeba się uciekać do obrazka (choćby słynna technika z połówką piksela).

odpowiedź 29 czerwca 2016 przez Schizohatter Nałogowiec (39,600 p.)
edycja 29 czerwca 2016 przez Schizohatter

Technika ta nazywa się antyaliasingiem, tak baj de łej.

Inną sprawą jest malowanie za pomocą urządzeń wskazujących, ponieważ występuje aliasing z natury.