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算法的示例代码。