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图像实现相同的功能，也许不是这样）

那么，有没有办法用干净，简短的javascript代码实现相同的清晰度结果，而不使用fabric.js？如果没有，我该如何解决点击问题？

感谢。

Answer 1

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

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

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

如果要绘制非水平线和非垂直线，则可以使用Bresenhan's Line Algorithm通过逐个像素绘制线条在画布上绘制清晰线条。之前的Q&A包含使用Bresenhan算法的示例代码。

Html5 Canvas - 使用fabric.js或不使用

1 个答案: