Html5畫布 - 使用fabric.js繪製完美線條或不使用

Question

我正在創建一個遊戲，我需要在不同類型的屏幕分辨率和縮放下實現HTML5上的完美畫布線。

很容易理解我說的，簡單地粘貼在兩個不同的代碼轉換成HTML文件（沒有的jsfiddle，因爲它太小通知）：

隨着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> 

沒有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> 

現在你可以看到，fabric.js刪除您不同種類的瀏覽器縮放（鼠標滾輪）一旦頁面加載下得到的模糊。 我有兩個問題，它雖然：

1）一旦你點擊畫布上線了 2）這是一個大的框架/庫，而我只需要它來畫線（也許不是它是否能夠實現與PNG圖像一樣）

那麼，有沒有一種方法可以在不使用fabric.js的情況下使用簡潔的JavaScript代碼實現相同的清晰度結果？ 如果不是，我該如何解決點擊問題？

謝謝。

Answer 1

在畫布上繪製的所有線條都會自動給予反鋸齒以減少「鋸齒」的視覺效果。這種抗鋸齒還會使線條看起來模糊不清。

如果你只繪製水平線和垂直線，你可以使他們酥：

• 繪製線條，context.translate(0.50,0.50)之前，
• 繪製只使用整數座標線，
• 繪製線後，context.translate(-0.50,-0.50)，

如果你正在繪製非水平和非垂直線條，那麼你可以使用Bresenhan's Line Algorithm通過逐個像素地繪製線條來在畫布上繪製清晰的線條。此前的Q&A具有使用Bresenhan算法的示例代碼。