Leinwand Zeichnungen, wie Linien, unscharf sind
Ich habe eine <div style="border:1px solid border;" />
und Leinwand, die gezeichnet wird mit:
context.lineWidth = 1;
context.strokeStyle = "gray";
Die Zeichnung sieht ziemlich verschwommen (Linienbreite weniger als man schafft sogar noch schlimmer Bild), und nichts in der Nähe der div-Grenze. Ist es möglich, die gleiche Qualität der Zeichnung als HTML mit canvas?
JS:
var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();
CSS:
div {
border: 1px solid black;
width: 100px;
height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}
HTML:
<table>
<tr><td>Line on canvas:</td><td>1px border:</td></tr>
<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div> </div></td></tr>
</table>
- Lösen Sie die bildunschärfe canvas ich entwickle ein js-framework js2dx.com. Es komponiert Leinwand Bild von DIV Mosaiken, das Ergebnis ist eine schärfere Darstellung bei Kosten, die in Bezug auf die cpu - /Speicher.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Beim zeichnen von Linien im canvas-Bereich, die Sie wirklich brauchen, zu überbrücken die Pixel. Es war eine bizarre Wahl in der API-meiner Meinung nach, aber einfach, mit zu arbeiten:
stattdessen:
hierzu:
Tauchen Sie ein in HTML5-canvas Kapitel spricht über diese schön
(achten Sie auf die "FRAGEN Sie PROFESSOR MARKUP" - Feld, etwa 1/4. der Weg nach unten)
context.translate(0.5, 0.5);
vor dem auftragen und danncontext.translate(-0.5, -0.5);
danach, so dass ich nicht haben, um 0.5 auf allesFand ich, dass das festlegen der Größe des Grafikbereichs (in CSS verursacht meine Bilder angezeigt werden, in einer verschwommenen Art und Weise.
Versuchen Sie dies:
als je mein post: HTML Verschwommen Leinwand Bilder
Sogar einfacher fix ist, dann nutzen Sie einfach dieses:
Von hier aus auf Ihre Koordinaten sollten so eingestellt werden, dass 0,5 pixel.
Nutze ich ein retina-display und ich habe eine Lösung gefunden, die für mich gearbeitet hier.
Kleine Zusammenfassung :
Zuerst müssen Sie die Größe der Leinwand doppelt so groß wie Sie es wollen, zum Beispiel :
Dann mit CSS setzen Sie es auf die gewünschte Größe :
Und schließlich skaliert die Zeichnung Kontext 2 :
window.devicePixelRatio
: developer.mozilla.org/en-US/docs/Web/API/Window/...Linien sind unscharf, weil die Leinwand virtuelle Größe ist gezoomt seine HTML-element tatsächliche Größe. Um dieses Problem zu beheben, müssen Sie anpassen canvas virtuelle Größe vor der Zeichnung:
JS:
HTML:
HTML:
Um dieses Problem zu vermeiden, in animation ich möchte ein kleines demo.
Grundsätzlich bin ich der überprüfung Inkrement-Werte zu jeder Zeit & springen in einem Satz von 1px durch entfernen von float-Werte.
HTML:
CSS:
JS: