HTML5 Canvas deaktiviert Antialias auf Primitive (Kurven, ...)

Das imageSmoothingEnabled wirkt sich nur auf Bilder aus, die mit drawImage() auf die Leinwand gezeichnet werden (daher der Name image SmoothingEnabled). Es gibt leider keine Möglichkeit, dies für Linien und Formen zu deaktivieren.

Wie bei der Antwort von 6502 und den vorherigen Antworten auf SO müssen Sie "Low-Level" -Methoden implementieren, um dies zu erreichen.

Hier sind einige Links zu einigen gängigen Algorithmen für verschiedene Primitive:

• Bresenham-Linienalgorithmus ( siehe diese Antwort für die Implementierung )
• Mittelpunkt-Algorithmus (und Ellipse mit dem gleichen ) Hier ist eine Implementierung .
• Bezier-Kurve ( Implementierung bei CodeProject )

Die Art und Weise, wie Sie dies implementieren müssen, besteht darin, die x- und y-Koordinaten aus diesen Formeln zu erhalten. Dann müssen Sie entweder rect(x, y, 1, 1) verwenden oder ein Pixel direkt setzen, indem Sie den Bilddatenpuffer direkt ändern. Letztere neigen dazu, für solche Dinge schneller zu sein.

In beiden Fällen haben Sie eine relativ hohe Leistungsreduzierung, da Sie JavaScript mit der internen kompilierten Iteration des Browsers iterieren müssen.

Leider gibt es keine Möglichkeit, Antialiasing beim Zeichnen auf einer Leinwand zu deaktivieren.

Die einzige Lösung, die ich gefunden habe, ist die Neuimplementierung von grafischen Grundelementen, die direkt auf die Bilddaten schreiben.