javascript - Html5 Canvas - 使用fabric.js或不使用fabric.js绘制完美的线条

Question

我正在创建一个游戏，我需要在不同类型的屏幕分辨率和缩放比例下在 HTML5 上实现完美的 Canvas 线。

为了轻松理解我正在谈论的内容，只需将两个不同的代码粘贴到 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) 一旦你点击 Canvas ，线条就消失了 2)这是一个很大的框架/库，我只需要它来画线(如果它可以用PNG图像实现同样的效果，也许不需要)

那么，有没有一种方法可以通过干净、简短的 JavaScript 代码实现相同的清晰度结果，而不使用 Fabric.js？ 如果没有，如何解决点击问题？

谢谢。

Answer 1

Canvas 上绘制的所有线条都会自动进行抗锯齿处理，以减少“锯齿”的视觉效果。这种抗锯齿也会使线条显得模糊。

如果您只绘制水平线和垂直线，则可以使它们清晰:

• 在绘制线条之前，context.translate(0.50,0.50),
• 仅使用整数坐标绘制线条，
• 绘制线条后，context.translate(-0.50,-0.50),

如果您要绘制非水平线和非垂直线，则可以使用 Bresenhan's Line Algorithm通过逐像素绘制线条在 Canvas 上绘制清晰的线条。上一篇Q&A有使用 Bresenhan 算法的示例代码。