javascript：需要平滑画布上绘制的线条

Question

所以我一直在尝试使用画布草图应用程序。我有这个问题，绘制的线是非常不洁净的。如下图所示。

然后我尝试了this并获得了以下结果，这是我想要的。

但这造成了一个新问题，橡皮擦功能无法正常工作。现在我一直试图让这两个工作有一段时间，但是不能这样做。

所以我想要的是一种新的平滑技术或一种使上述两种方法有效的方法。

BTW这里是没有平滑的演示：http://jsbin.com/axarun/1/edit

以下是平滑的演示：http://jsbin.com/aviluk/2/edit

Thnx提前。

Answer 1

方法1：

您可以通过执行以下操作“强制”画布使用消除锯齿：

ctx.translate(0.5, 0.5);

强制引用，因为这取决于您正在使用的浏览器中的实际实现。目前无法通过意图启用/禁用反别名。

方法2：

通过将画布本身设置为双倍大小，将画布设置为“高分辨率”，但通过使用CSS规则设置canvas元素样式，强制它以原始大小显示：

<canvas id="myCanvas" width="1600" height="1200"
    style="width:800px;height:600px" />

请记住将鼠标坐标和笔宽加倍。这将占用4倍的内存和性能，但会为您提供高分辨率的线条（外观）。

在这种情况下，浏览器会将画布视为图像，并对任何缩放图像应用消除锯齿，而不是画布的反别名方法。

请注意， 与将缩放变换应用于画布相同。

在此处查看“hi-res canvas”的演示：
http://jsfiddle.net/q2t5A/

方法3-ish：

对于实际流畅的线条，你可以在这里查看我的功能：
http://www.codeproject.com/Tips/562175/Draw-Smooth-Lines-on-HTML5-Canvas

这需要一组x / y对并平滑线（基数样条）。这些线将通过原始点，不需要控制点。

这当然意味着你记录实际的点，当你用鼠标向上时，你可以使用此代码中的curve（）函数重绘画布。在任何情况下，这都是一种正确的方法，在数组中记录笔划然后重绘（这也允许您使用图层）。有一些解决方法可以避免使用屏幕外渲染所有内容 画布存放f.ex.每一层。通过使用小的非整数偏移将画布绘制到另一个画布上将强制使用反别名（但请参见第1点）。