我正在创建一个游戏,我需要在不同类型的屏幕分辨率和缩放下实现HTML5上的完美画布线。Html5画布 - 使用fabric.js绘制完美线条或不使用
很容易理解我说的,简单地粘贴在两个不同的代码转换成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代码实现相同的清晰度结果? 如果不是,我该如何解决点击问题?
谢谢。