Czy płótno HTML5 obsługuje funkcję powiększania opartą na przeglądarce?

Question

Przygotowałem proste płótno z narysowanym na nim fillTextem. Wygląda całkiem nieźle, ale kiedy korzystam z przeglądarki wyposażonej w funkcję powiększania (Safari, Firefox), antyaliasing wygląda brzydko.

Próbowałem użyć scale(), aby podnieść siatkę, ale to nie pomaga.

Czy istnieje sposób rysowania na płótnie, który wygląda ostro nawet przy powiększonym oknie przeglądarki?

---

ekranu (bez powiększenia): http://i.stack.imgur.com/CGWka.png

ekranu (max zoom): http://i.stack.imgur.com/vNPjF.png

Answer 1

Można 'zoom' płótno przez skalowanie kontekst płótno przed polecenia rysowania spowodować przedmiotów sporządzony w większym rozmiarze, płynnie. Na przykład, zobacz this example of mine, który pozwala na powiększenie sposobu na rysowania i zobacz szczegóły niedostępne w domyślnej prezentacji.

Problem z powiększaniem przeglądarki polega na tym, że płótno HTML5 - podobnie jak JPG lub PNG, w przeciwieństwie do SVG - jest oparte na pojedynczych pikselach. Jeśli narysujesz okrąg w 10 pikselach, a następnie powiedz przeglądarce, aby powiększyć go do 50 pikseli, przeglądarka nie może "wymyślić" danych, aby narysować gładkie kółko. Najlepsze, co można zrobić, to zapewnić interpolację obrazu, aby sprawić, że "duże piksele" wyglądają nieco gładko.

Rozwiązanie

z obrazem, można zrobić zdjęcie z dużą ilością pikseli (np 1000x800) i poinformować przeglądarkę, aby wyświetlić go w innym, mniejszym rozmiarze (na przykład 250x200). Gdy przeglądarka zbliża się, ma ona więcej pikseli do wyświetlenia. Na przykład:

<img src="1000x800.jpg" style="width:250px; height:200px"> 

Możesz zrobić to samo z płótnem. Liczba pikseli w rozmiarze danych określona jest przez atrybuty height i width (w HTML lub JavaScript). Możesz osobno określić rozmiar wyświetlania CSS o rozmiarze (jak wyżej) na mniejszy rozmiar. Nie musisz nawet modyfikować istniejącego kodu rysowania na płótnie; po prostu:

1. Regulacja height i width swojego kanwie konkretnego czynnika (np 4),
2. Zastosowanie CSS ustawić wysokość wyświetlacza i szerokość z powrotem do pierwotnego rozmiaru, a następnie
3. Przed wszystkim inne polecenia do rysowania, powiększaj swój kontekst za pomocą ctx.scale(4,4).

Edit: Stworzyłem przykład to tutaj:
http://jsfiddle.net/u5QPq/embedded/result/ (code)

Oto jak to wygląda podczas powiększania:

Jako dodatkowy bonus Twoje płótno będzie bardziej płynnie (na wypadek, gdyby ktoś zabił drzewa).