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

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

然后我试了一下，得到了我想要的结果

但这带来了一个新问题，橡皮擦功能无法工作。现在我已经试着让这两个工作了一段时间，但就是做不到

所以我想要的是一种新的平滑技术，或者一种使上述两种方法都起作用的方法

顺便说一句，这里是没有平滑的演示：

下面是平滑的演示：

提前Thnx。

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

ctx.translate(0.5, 0.5);

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

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

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

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

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

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

请参见此处的“高分辨率画布”演示：

方法3-ish： 对于实际的平滑线条，您可以在此处查看我的函数：

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

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