Kanał HTML5 .translate i .scale powoduje, że na zdjęciach występują postrzępione krawędzie.

Question

Oto przykład: Codepen. Po prostu kliknij w dowolnym miejscu na płótnie (będą czarne obramowania) i narysowana zostanie fioletowa gwiazda.

Jak widać, gwiazda ma postrzępione krawędzie. Jest narysowany za pomocą .translate i .scale. Aby dowieść, że .translate i .scale powodują postrzępione krawędzie, przejdź do wiersza 28 (w sekcji JavaScript CodePen) i odkomentuj go. Następnie skomentuj linię 27. Po kliknięciu obszaru roboczego gwiazda zostanie narysowana bez .translate i .scale, ale nie ma postrzępionych krawędzi.

Gwiazdka została narysowana w programie Adobe Illustrator i jest eksportowana jako plik PNG o wymiarach 300 x 300 pikseli.

Aktualizacja: muszę korzystać PNG „s na drodze. No JPG, SVG, itp.

Jak naprawić ten problem?

---

Co Próbowałem tak daleko, ale nie pomogło:

1. Wyłączony antyaliasingu w Preferencje ogólne Adobe Illustrator za
2. Wyłączony antyaliasingu w dokumencie Raster Adobe Illustrator za i Efekty Ustawienia
3. Używany ekran 72ppi zamiast 300ppi (domyślny) w dokumencie programu Illustrator Ustawienia rastra i efektów
4. Umieść obrys (obramowanie) na ekranie gwiazda i spowodował, że ten obrys miał 0% krycia. Myślałem, że tylko krawędź/krawędzie stają się poszarpane. Tak więc pomyślałem, że obrys będzie "niewidzialny", który powoduje, że 0% krycie jest wyszczerbione, a więc nic nie będzie wyglądało jak postrzępione. Ale to też nie działa.

5. Próbowałem przy użyciu tych CSS zaproponował "hacki":

   canvas { image-rendering: crisp-edges; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ /*image-rendering: pixelated; // Awesome future-browsers */ image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; /*IE*/ }

6. Próbowałem zostały również za pomocą tego języka JavaScript "hack":

   context.webkitImageSmoothingEnabled = true; context.mozImageSmoothingEnabled = true; context.imageSmoothingEnabled = true; /// future

---

Uwaga: Próbowałem wszystkich kod, który jest w Codepen lokalnie na Safari, Firefox i Chrome przed dodaniem wszystkich w Codepen.

Answer 1

Po zmianie gwiazdy na wektor rozwiąże problem.

star_img.src='data:image/svg+xml;utf8,<svg width="300px" height="275px" viewBox="0 0 300 275" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon fill="#fdff00" stroke="#605a00" stroke-width="15" points="150,25 179,111 269,111 197,165 223,251 150,200 77,251 103,165 31,111 121,111" /></svg>'; 

http://codepen.io/anon/pen/QyBGMv