Zeichnen von flachen Formen auf HTML-Canvas schafft verschwommene Grenzen

Ich möchte flache Formen, wie Rechtecke, auf einem HTML-Canvas zeichnen, aber jedes Mal, wenn ich die oder rect und dann fill verwende, ist das Ergebnis eine Form mit einer verschwommenen inneren Schein und Schatten. Gibt es eine Möglichkeit, diese "Lichteffekte" los zu werden?Zeichnen von flachen Formen auf HTML-Canvas schafft verschwommene Grenzen

Als Beispiel ist hier ein Stück Code, den ich verwenden:

var canvas = document.getElementById('map'); 
var ctx = canvas.getContext("2d"); 

ctx.fillStyle = c; 
ctx.fillRect(x, y, w, h);

und das erzeugte Ergebnis (mit dem Schein und Schatten):

Quelle

2016-06-26 Filipe Moreira

Wie haben Sie das Bild erhalten, das Sie verlinkt haben? Wenn es über Bildschirmaufnahme ist, hilft es nicht, da die Artefakte anders sind, als Sie mit normalem Rendering erhalten würden. Überprüfen Sie, ob Breite und Höhe der Leinwandbreite mit der Leinwandbreite und -höhe übereinstimmen. Wenn sie nicht übereinstimmen, sehen Sie stärkere Antialias-Artefakte. Stellen Sie sicher, dass beim Rendering, das Sie an Pixelgrenzen rendern, das Rendering bei x = 1.5, y = 1.5 anders aussieht als x = 1 und y = 1, wie Sie es mitten auf einem Pixel rendern würden – Blindman67

versuche 'x = parseInt (x) +0,50; y = parseInt (y) +0,50; '. –

Vielen Dank! Es scheint, dass das Problem wirklich war, dass ich die Breiten- und Höhenattribute nicht eingestellt hatte ... Vielen Dank für diese Unterstützung! –

wahrscheinlich nur die Leinwand gesetzt. width und canvas.height zu den gleichen Werten haben Sie den CSS-Stil. Wenn einige Elemente von CSS skaliert werden, erhalten sie normalerweise Antialias (Leinwand und Bilder).

image-rendering: auto; 
image-rendering: crisp-edges; 
image-rendering: pixelated;

einige Browser auch mit diesen Arten entsprechen, die die Anti-Aliasing- mehr über die here css entfernen

Quelle

2016-06-26 05:44:56 shadownrun

Vielen Dank! Ich hatte die Attribute Breite und Höhe nicht eingestellt ... –

ich eine andere Methode zum Zeichnen von Formen verwenden:

var context = canvas.getContext("2d"); 
var rectX = 400, rectY = 300; 

function draw() { 
context.fillStyle = "#FFFF00" 
context.fillRect(rectX, rectY, 100, 200); 
} 

draw();

Hier ist eine Geige mit dem Ergebnis: https://jsfiddle.net/Sufi2425/fnd5es9a/

Quelle

2016-06-26 21:51:47 Sufi2425

Zeichnen von flachen Formen auf HTML-Canvas schafft verschwommene Grenzen

Antwort

Verwandte Themen