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

Question

所以我一直在尝试开发一个画布素描应用程序。我有这个问题，画的线很不干净。如下图所示。

然后我尝试了this 并得到了我想要的以下结果。

但这产生了一个新问题，橡皮擦功能不起作用。现在我一直试图让这两个工作一段时间，但就是做不到。

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

顺便说一句，这里是没有平滑的演示：http://jsbin.com/axarun/1/edit

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

提前谢谢。

Answer 1

方法一：

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

ctx.translate(0.5, 0.5);

强制使用引号，因为这取决于您使用的浏览器中的实际实现。目前无法有意启用/禁用抗锯齿。

方法二：

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

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

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

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

请注意，这与对画布应用缩放变换不同。

在此处查看“高分辨率画布”的演示：
http://jsfiddle.net/q2t5A/

方法 3-ish：

对于实际的平滑线，您可以在此处查看我的功能：
http://www.codeproject.com/Tips/562175/Draw-Smooth-Lines-on-HTML5-Canvas

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

这当然意味着您记录了实际的点，当鼠标向上时，您使用此代码中的 curve() 函数重新绘制画布。无论如何，这将是一种正确的方法，将笔画记录在一个数组中，然后重绘（这也将允许您使用图层）。有一些解决方法可以避免使用屏幕外渲染一切 用于存储 f.ex 的画布。每一层。通过使用小的非整数偏移将画布绘制到另一个画布上将强制消除锯齿（但请参见第 1 点）。