Narysuj 1-pixel linie na współrzędnych jak ctx.lineTo(10.5, 10.5). Rysowanie jednopikselowej linii nad punktem (10, 10) oznacza, że ten piksel 1 w tej pozycji sięga od 9.5 do 10.5, co skutkuje dwoma liniami, które są rysowane na płótnie.

Fajną sztuczką, aby nie zawsze trzeba było dodawać 0.5 do rzeczywistej współrzędnej, którą chcesz narysować, jeśli masz dużo jednopikselowych linii, jest ctx.translate(0.5, 0.5) całe płótno na początku.

Można to zrobić w Mozilli Firefox. Dodaj to do swojego kodu:

contextXYZ.mozImageSmoothingEnabled = false;

W Operze jest to obecnie żądanie funkcji, ale mam nadzieję, że wkrótce zostanie dodane.

Musi być antyaliasowa grafika wektorowa

Antyaliasing jest wymagany do poprawnego kreślenia grafiki wektorowej ze współrzędnymi nie całkowitymi (0.4, 0.4), co zrobi tylko niewielu klientów.

Gdy podano współrzędne nie-całkowite, płótno ma dwie opcje:

• Antialias - maluje piksele wokół współrzędnych w odniesieniu do odległości współrzędnej całkowitej od nie-całkowitej (błąd zaokrąglania).
• Runda - zastosuj jakąś funkcję zaokrąglania do współrzędnej Nie-całkowitej(więc 1.4 będzie na przykład 1).

Późniejsza strategia będzie działać dla Grafiki statycznej, chociaż dla małej Grafiki (okrąg o promieniu 2) krzywe będą pokazywać wyraźne kroki, a nie gładką krzywą.

Prawdziwy problem polega na tym, że grafika jest tłumaczona (przesuwana) - przeskakuje między jednym pikselem a drugim (1.6 => 2, 1.4 => 1), oznacza, że pochodzenie kształtu może przeskoczyć w stosunku do kontenera macierzystego (ciągłe przesuwanie 1 piksela w górę / w dół i w lewo/w prawo).

Kilka porad

Wskazówka # 1: możesz zmiękczyć (lub utwardzić) antyaliasing, skalując płótno (powiedzmy przez x), a następnie samodzielnie zastosować wzajemną skalę (1 / x) do geometrii (nie używając płótna).

Porównaj (bez skalowania):

With (canvas scale: 0.75; manual scale: 1.33):

And (Skala płótna: 1.33; skala ręczna: 0.75):

Tip # 2: Jeśli naprawdę szukasz jaggy look, spróbuj narysować każdy kształt kilka razy (bez wymazywania). Z każdym rysunkiem antyaliasingowe piksele stają się ciemniejsze.

Porównaj. Po narysowaniu raz:

Po trzykrotnym narysowaniu:

Narysowałbym wszystko używając niestandardowego algorytmu liniowego, takiego jak algorytm liniowy Bresenhama. Sprawdź tę implementację javascript: http://members.chello.at/easyfilter/canvas.html

Myślę, że to na pewno rozwiąże Twoje problemy.

Chcę dodać, że miałem problemy podczas zmniejszania rozmiaru obrazu i rysowania na płótnie, nadal używało wygładzania, mimo że nie używało podczas skalowania.

Rozwiązałem używając tego:

function setpixelated(context){
    context['imageSmoothingEnabled'] = false;       /* standard */
    context['mozImageSmoothingEnabled'] = false;    /* Firefox */
    context['oImageSmoothingEnabled'] = false;      /* Opera */
    context['webkitImageSmoothingEnabled'] = false; /* Safari */
    context['msImageSmoothingEnabled'] = false;     /* IE */
}

Możesz użyć tej funkcji w następujący sposób:

var canvas = document.getElementById('mycanvas')
setpixelated(canvas.getContext('2d'))

ctx.translate(0.5, 0.5);
ctx.lineWidth = .5;

Z tego combo mogę narysować ładne cienkie linie 1px.

Zauważ bardzo ograniczoną sztuczkę. Jeśli chcesz utworzyć obraz w 2 kolorach, możesz narysować dowolny kształt z kolorem #010101 na tle z kolorem #000000. Gdy to zrobisz, możesz przetestować każdy piksel w imageData.data [] i ustawić na 0xFF niezależnie od wartości nie jest 0x00:

imageData = context2d.getImageData (0, 0, g.width, g.height);
for (i = 0; i != imageData.data.length; i ++) {
    if (imageData.data[i] != 0x00)
        imageData.data[i] = 0xFF;
}
context2d.putImageData (imageData, 0, 0);

Rezultatem będzie nie antyaliased czarno-biały obraz. Nie będzie to idealne, ponieważ nastąpi jakiś antyaliasing, ale ten antyaliasing będzie bardzo ograniczony, a kolor kształtu będzie bardzo podobnie jak kolor tła.