Html5 Canvas - Zeichnung perfekte Linien mit fabric.js oder ohne

Question

Ich erstelle ein Spiel, muss ich eine perfekte Leinwand Linie auf HTML5 unter verschiedenen Arten von Bildschirmauflösungen und Zooms erreichen.

Um leicht verstehen, ich rede, einfach die zwei verschiedenen Codes in eine HTML-Datei einfügen (nicht jsFiddle, da es zu klein ist zu bemerken):

Mit fabric.js:

<canvas id = "c" width = "600" height = "300"></canvas> 
<script src = "https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> 

<script> var c=document.getElementById("c"); 
var context=c.getContext("2d"); 
new fabric.Canvas('c', { selection: false }); 
context.moveTo(0, 0); 
context.lineTo(0, 300); 
context.stroke(); 
</script> 

Ohne fabric.js:

<canvas id = "c" width = "600" height = "300"></canvas> 
<script> var c=document.getElementById("c"); 
var context=c.getContext("2d"); 
context.moveTo(0, 0); 
context.lineTo(0, 300); 
context.stroke(); 
</script> 

Nun, wie Sie sehen können, entfernt fabric.js die Verschwommenheit, die Sie unter verschiedenen Arten von Browser-Zooms (Mausrad), sobald die Seite geladen bekommen. Ich habe zwei Probleme mit ihm aber:

1) Sobald Sie auf die Leinwand klicken wird die Linie 2 weg) Es ist ein großer Rahmen/Bibliothek, und ich brauche es nur Linien zu zeichnen (Vielleicht nicht, wenn es erreichen können die gleiche Sache mit PNG-Bildern)

Also, gibt es eine Möglichkeit, das gleiche Schärfeergebnis mit einem sauberen, kurzen Javascript-Code zu erreichen, ohne fabric.js zu verwenden? Wenn nicht, wie kann ich das Klickproblem beheben?

Danke.

Answer 1

Alle auf der Leinwand gezeichneten Linien erhalten automatisch Anti-Aliasing, um den visuellen Effekt von "jaggies" zu verringern. Dieses Anti-Aliasing lässt die Linie auch verschwommen erscheinen.

Wenn Sie nur horizontale und vertikale Linien zeichnen Sie können sie klar machen:

• Bevor die Linien zeichnen, context.translate(0.50,0.50),
• die Linien zeichnen, indem nur ganzzahlige Koordinaten
• die Linien Nach dem Zeichnen , context.translate(-0.50,-0.50),

Wenn Sie nicht horizontale und nicht-vertikale Linien zeichnen, dann können Sieverwenden, um scharfe Linien auf der Leinwand zu zeichnen, indem Linien Pixel für Pixel gezeichnet werden. Dieser vorherige Q&A hat einen Beispielcode, der den Bresenhan-Algorithmus verwendet.