Javascript 在画布上绘制线阵列

您好，相对于鼠标点击，我在画布上画3条线时遇到了一些问题

这三条线构成了一张笑脸

因此，在我的代码中，我有一个名为parseRecordedLinePoints（）的函数，在这个函数中，它从每一行相对于鼠标的位置生成点，然后在画布上绘制点

由于某种原因，当它被调用并在画布上划动时，眼睛会在彼此上方被划动。（重叠）

我尝试通过将函数更改为：

    function parseRecordedLinePoints(Point, index, arr) {
      ctx.lineTo(Point.x, Point.y);
      ctx.stroke();
    }

当函数是这样的时候，它会画出笑脸，但不是相对的，并且线条相互连接

---

下面是当前作为代码片段的代码，因此您可以更好地查看。你可以看到它如何把眼睛画在错误的位置，并直接在我的鼠标下重叠。我试着让它相对正确地画出笑脸

代码：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var cursorX=100//示例位置X
var粗略=0//示例位置Y
var-relX=0；
var=0；
//三行//笑脸。
var记录行=[{
颜色：{
r:0，
g:50，
b:0
},
线条点：[{
x:125，
y:370.2
},
{
x:125，
y:367.9
},
{
x:127.2，
y:365.7
},
{
x:128.4，
y:367.9
},
{
x:127.2，
y:370.2
},
{
x:125，
y:371.3
},
{
x:122.8，
y:370.2
},
{
x:121.7，
y:367.9
},
{
x:121.7，
y:364.6
},
{
x:123.9，
y:363.5
},
{
x:127.2，
y:363.5
},
{
x:128.4，
y:365.7
},
{
x:128.4，
y:369
},
{
x:126.1，
y:370.2
},
{
x:123.9，
y:369
},
{
x:122.8，
y:366.8
},
{
x:123.9，
y:364.6
},
{
x:127.2，
y:364.6
},
{
x:127.2，
y:367.9
},
{
x:125，
y:369
},
{
x:123.9，
y:366.8
},
{
x:123.9，
y:366.8
}
]
},
{
颜色：{
r:100，
g:0，
b:0
},
线条点：[{
x:168.4，
y:365.7
},
{
x:166.1，
y:366.8
},
{
x:163.9，
y:363.5
},
{
x:166.1，
y:362.4
},
{
x:168.4，
y:363.5
},
{
x:167.2，
y:365.7
},
{
x:163.9，
y:365.7
},
{
x:163.9，
y:362.4
},
{
x:165，
y:360.2
},
{
x:168.4，
y:360.2
},
{
x:169.5，
y:363.5
},
{
x:168.4，
y:365.7
},
{
x:165，
y:365.7
},
{
x:163.9，
y:363.5
},
{
x:165，
y:360.2
},
{
x:168.4，
y:360.2
},
{
x:168.4，
y:363.5
},
{
x:168.4，
y:364.6
}
]
},
{
颜色：{
r:100，
g:0，
b:0
},
线条点：[{
x:107.2，
y:377.9
},
{
x:109.5，
y:379
},
{
x:110.6，
y:381.3
},
{
x:112.8，
y:382.4
},
{
x:115，
y:384.6
},
{
x:117.2，
y:386.8
},
{
x:119.5，
y:387.9
},
{
x:122.8，
y:389
},
{
x:126.1，
y:390.2
},
{
x:129.5，
y:391.3
},
{
x:132.8，
y:391.3
},
{
x:136.1，
y:391.3
},
{
x:139.5，
y:392.4
},
{
x:142.8，
y:392.4
},
{
x:146.1，
y:392.4
},
{
x:149.5，
y:392.4
},
{
x:152.8，
Y
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;

let mouse = {
   x: null,
   y: null,
}

window.addEventListener('click', function(e) {
  mouse.x = e.x;
  mouse.y = e.y;
  drawFace();
});

function drawFace() {
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.arc(mouse.x, mouse.y, 5, 0, Math.PI * 2);
  ctx.arc(mouse.x + 30, mouse.y, 5, 0, Math.PI * 2);  
  ctx.fill();
  ctx.closePath();
  
  ctx.strokeStyle = "black";
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.arc(mouse.x + 14, mouse.y + 9, 30, 0.3, Math.PI / 1.1)
  ctx.stroke();
  ctx.closePath(); 
}