Javascript SVG中canvas quadraticCurveTo的等价性

我正在开发一个插件，允许使用鼠标或触摸画出“自然外观”的签名。当用户确认后，结果将是一个存储的SVG，然后可以在“单击签名”按钮的位置显示该SVG

附带的JSFIDLE显示了我正在尝试做的事情的测试平台。SVG生成的图像应接近原始画布路径

第一个div包含一个

画布

，我在其中绘制了一些多段线（例如路径）。使用

quadraticCurveTo

，以中点作为控制点，我用平滑曲线绘制直线。这个很好用

曲线图的关键部分是：

$.each(lines, function () {
    if (this.length > 0) {
        var lastPoint = this[0];
        ctx.moveTo(lastPoint[0], lastPoint[1]);
        for (var i = 1; i < this.length; i++) {
            var point = this[i];
            var midPoint = [(lastPoint[0] + point[0]) / 2, (lastPoint[1] + point[1]) / 2];
            ctx.quadraticCurveTo(lastPoint[0], lastPoint[1], midPoint[0], midPoint[1]);
            lastPoint = point;
        }
        // Draw the last line straight
        ctx.lineTo(lastPoint[0], lastPoint[1]);
    }
});

$。每个（行、函数（）{
如果（此长度>0）{
var lastPoint=此[0]；
ctx.moveTo（lastPoint[0]，lastPoint[1]）；
对于（var i=1；i

我已经尝试了多个选项来生成相同输出的SVG，但如何将相同的点集转换为等效的曲线却让我感到困惑。二次Bezier需要“适当的”控制点，但如果可能的话，我更愿意使用更简单的中点

有什么想法吗？这是可能的，还是我必须将两者转换为使用计算控制点的Beziers。有没有一个简单的方法来计算控制点，将做同样的工作

---

jQuery或原始JavaScript解决方案很好，但您需要在提供的JSFIDLE中演示：）

这只是代码中的一个bug。您没有在SVG版本中更新

lastPoint

如果您更新SVG版本以匹配画布版本，则会得到相同的曲线

---

只是好奇而已。使用二次曲线的方式（控制点位于直线的中点）只会生成一条直线。这有点违背了使用曲线的观点。我的观点是正确的。当控制点位于两点的精确中点时，二次贝塞尔曲线将是一条直线。请参阅：但是我现在看到您在画布版本中使用的坐标与在SVG版本中使用的坐标不同。在画布版本中，您通过中点绘制，并使用阵列点作为控制点。一定是把剪切/粘贴弄糟了。谢谢。我刚刚注意到SVG没有画完整的线条。每个路径上的两端都比画布版本短。添加缺少的段。添加缺少的结束段后，我注意到行在结束点之前停止：这是SVG功能（不包括行的最终像素）还是画布版本过度拉伸？我想这是因为画布版本中的结束

lineTo（）

，而不是SVG版本。谢谢，但是对不起，这和我给你的链接有什么不同？每条路径中的最后一行似乎短了一个像素。这是因为SVG行不包括端点/像素吗？