ctx.mozImageSmoothingEnabled = false;
für Webkit (oder andere Browser)? Ich brauche es, um Anti-Aliasing zu entfernen, weil ich versuche, einen Pixeleffekt auf ein Bild zu bekommen. Mit Anti-Aliasing sieht es schlecht aus, aber ohne scharfe Kanten.
AFAIK noch nie. Sie können den gleichen Effekt erzielen, indem Sie Pixel für Pixel zeichnen, was Sie wollen, aber mit mehr Arbeit (hey, nicht so viel, wenn es etwas wie Linien ist).
Es gibt ein (fast ein Jahr alt) bug report in webkit darüber. Eine andere Möglichkeit wäre, Ihre Pixel-Art in höheren Auflösungen zu erstellen und zu skalieren. Dies würde wahrscheinlich bessere Ergebnisse bringen als Upsizing, würde aber mit höheren Verkehrsanforderungen kombiniert werden.
Ein kurzer Blick auf den Link von Stephan berichtet unten zeigt das folgende Update für dieses Problem auf dem Tracker Bug:
Der vorgeschlagene Wert für die Bildwiedergabe des CSS3 ‚optimieren-Kontrast‘ umgesetzt wurde als ' -webkit-optimize-contrast 'in Bug 56627. Im Moment wird in WebKit die nächste Interpolation verwendet.
So scheint die CSS-Einstellung die Antwort zu sein.
Dies wird jetzt von Chrome ignoriert:/(Ich denke alle Webkit) – UpTheCreek
Runden Sie Ihr X und Y ab, bevor Sie Ihre Bilder auf dem Bildschirm zeigen.
Wenn Sie Bilder auf Unterpixel zeichnen, versuchen einige Browser, diese vor dem Anzeigen des Bildes zu anti-aliasieren.
Der schnellere Weg ist eine binäre OR mit Null.
myObject.X = myObject.X | 0;
Für eine tiefere Erklärung, nehmen Sie eine Lese in diesem Artikel:
http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/
Und hier ist ein jsperf Test auf Rundungsmethoden:
Scheint' myObject.X = myObject.X >> 0 'ist ein etwas schneller. Beachten Sie, dass sich beide wie "Math.floor" und nicht "Math.round" verhalten. – UpTheCreek
@UpTheCreek Die absolut schnellste Methode: 'myObject.X = ~~ myObject.X'. [Siehe die Jsperf] (http://jsperf.com/math-floor-vs-math-round-vs-parseint/110). – rvighne
@rvighne: nicht auf meinem Rechner mit Win7 Chrome V32 scheinbar: * ± 0,23% 0,27% langsamer * – UpTheCreek
Für die <canvas> Tag, WebKit-Nachtzeiten nach r117635 und Chrome Canary 21.0.1154.0 haben jetzt ein webkitImageSmoo thingEnabled-Attribut. (Beachten Sie, dass dies nur für <canvas> gilt, nicht Elemente allgemein in HTML.)
Eigentlich möchten Sie dies auf den 2D-Kontext der Leinwand anwenden, nicht auf das Canvas-Element selbst. 'var ctx = canvas.getContext ('2d'); ctx.webkitImageSmoothingEnabled = false; 'oder' ctx.mozImageSmoothingEnabled = false; ' – Fritzy
@Fritzy - das macht nichts in Chrome 21 – UpTheCreek
Funktioniert jetzt in Chrome 22! – forresto
Wenn Sie Form zeichnen möchten, ohne glatte Kanten versuchen Halb Pixel auf Koordinaten zu verwenden.
Stellen Sie sich jedes Pixel als großes Quadrat vor. Die ganzzahligen Koordinaten (0, 1, 2 ...) sind die Kanten der Quadrate. Wenn Sie eine Zeile zwischen ganzzahligen Koordinaten zeichnen, überlappt sie die gegenüberliegenden Seiten des Pixelquadrats, und die resultierende Linie wird zwei Pixel breit gezeichnet. Um eine Linie zu zeichnen, die nur ein Pixel breit ist, müssen Sie die Koordinaten um 0,5 senkrecht zur Richtung der Linie verschieben.
Wenn Sie beispielsweise versuchen, eine Linie von (1, 0) nach (1, 3) zu zeichnen, zeichnet der Browser eine Linie, die 0,5 Bildschirmpixel auf beiden Seiten von x = 1 abdeckt. Der Bildschirm kann ein halbes Pixel nicht angezeigt werden, so dass er die Linie Abdeckung insgesamt zwei Pixel erweitert:
Aber, wenn Sie versuchen, eine Linie zu zeichnen von (1,5, 0) bis (1,5, 3), der Browser wird eine Linie abdeckt 0,5 Bildschirmpixel auf jeder Seite der x = 1,5, ziehen, die in einer echten 1 Pixel breite Linie ergibt:
Sie wissen, mit Pixel-Art gezackt ist gut, und glatt ist schlecht. Ich suche nach dem gleichen Problem und habe keine Webkit-Entsprechungen gefunden. – Omiod
'' 'ctx.webkitImageSmoothingEnabled = false''' funktioniert jetzt in Chrome 22 – forresto