Javascript-需要仅从SVG路径的笔划获取x和y坐标吗？

我有一个画布，其中绘制了一个元素svg示例一个圆圈，用户负责用鼠标绘制这个图，我将用户绘制的点x和y保存在一个数组中，但我不知道如何仅从svg笔划中获取点

我的问题是： 使用isPointInStroke，我可以看到点是否在笔划中，但如果我没有笔划的“总点”数组，就不可能知道用户是否绘制了100%的SVG图形。在前面的方法中，如果用户绘制了一半的图形，但正确，我将获得100%的成功

function init() {
    canvas = document.getElementById('can');
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;

    var svgPathCirculo=" M125,200a75,75 0 1,0 150,0a75,75 0 1,0 -150,0";
    var circulo = new Path2D(svgPathCirculo);
    ctx.lineWidth = 5;
    ctx.setLineDash([5, 15]);
    ctx.stroke(circulo);

    // Just example to check if it works
    if(ctx.isPointInStroke(circulo, 125, 200)){
      ctx.arc(200,200,3,0,2*Math.PI);
      ctx.fill();
    };

    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
}

我使用画布在其上绘制，使用svg显示预定义的形状，以便用户在绘制（如幼儿画册）时作为模板遵循

 function draw() {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    ctx.closePath();
}
function findxy(res, e) {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        if(!arrayCoordenadas.includes({x:currX,y:currY})){
          arrayCoordenadas.push({x:currX,y:currY});
        }


        flag = true;
        dot_flag = true;
        if (dot_flag) {
            ctx.beginPath();
            ctx.fillStyle = x;
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            if(!arrayCoordenadas.includes({x:currX,y:currY})){
              arrayCoordenadas.push({x:currX,y:currY});
            }
            draw();
        }
    }
}

我需要知道svg笔划路径的每个x和y坐标

---

示例：

我添加了一个函数来检测鼠标在画布中的位置，现在currX变成了curr.x。。。等

如果使用的是PATH2D2D，则可以通过以下方式检测点{x，y}是否位于笔划中：

ctx.isPointInStroke(the_path, x, y)

接下来是我的代码。用户只能在笔划内绘制

现在代码正在运行，但我认为您可能不知道用户是否绘制了100%的SVG图形。您可以将点推到点数组中，计算路径的长度，并将其与圆的长度进行比较，但我认为这样做不行

设prev={}， curr={}； 让flag=false； 让circulo； 函数初始化{ canvas=document.getElementByIdcan； ctx=canvas.getContext2d； w=canvas.width=400； h=canvas.height=400； var svgPathCirculo=M125200A75,75 0 1,0 150,0a75,75 0 1,0-150,0； circulo=新路径2DSVGPathCirculo； ctx.线宽=10； ctx.setLineDash[5,15]； ctx.strokecurculo； canvas.addEventListenermousemove、move、false； canvas.addEventListenermousedown、down、false； canvas.addEventListenermouseup，向上，false； canvas.addEventListenermouseout，up，false； } 函数drawprev、curr、trazado{ ctx.setLineDash[]；//取消设置linedash ctx.lineCap=圆形； ctx.strokeStyle=黄金 ctx.lineWidth=5； 如果 ctx.isPointInstrocketrazado，货币x，货币y&& ctx.isPointInStroketrazado，上一个x，上一个y { ctx.beginPath； ctx.moveToprev.x，上一版本y； ctx.lineTocurr.x，curr.y； ctx.stroke； } } 唐恩函数{ prev=oMousePoscanvas，e； curr=oMousePoscanvas，e； flag=true； } 函数upe{ flag=false； } 函数移动{ 如果旗{ curr=oMousePoscanvas，e； drawprev、curr、circulo； prev={x:curr.x，y:curr.y}； } } 函数oMousePoscanvas，evt{ var ClientRect=canvas.getBoundingClientRect； 返回{ //目标 x:Math.roundevt.clientX-ClientRect.left， y:Math.roundevt.clientY-ClientRect.top }; } 初始化； 画布{边框：1px实心}

---

我很困惑：您将问题标记为SVG，然后谈论画布和-画布上下文的一种方法。你能添加一些代码吗。一个有效的例子就好了。现在问题的形式更好了，非常感谢大家