Javascript 半径线显示在移动的圆弧上

我试图创建这些移动的形状，形状由一个半圆和一个对称的上弧和下弧组成。 它们应该是前面的形状，但现在它们移动时有一条像尾巴一样的线拖在后面。

这些线似乎是从上弧和下弧的移动到部分，但我不知道如何解决它。 我应该在哪里换掉它

function Fish(x, y, dx, dy, radius){

    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = 30;
    
    this.draw = function(){

        c.beginPath();
        c.arc(this.x/0.6, this.y, this.radius, Math.PI * 1.5, Math.PI * 0.5, false)
        
        //Upper Arc
        c.moveTo(this.x, this.y);
        c.arc(this.x/0.6, this.y+(3*this.radius), this.radius*4, Math.PI * 229/180, Math.PI * 1.5, false)
        
        //Lower Arc
        c.moveTo(this.x, this.y);
        c.arc(this.x/0.6, this.y-(3*this.radius), this.radius*4, Math.PI * 131/180 , Math.PI * 0.5, true)
        c.strokeStyle = "green";
        c.stroke();

    }

---

这是因为

arc

方法在内部跟踪

lineTo

从当前指针位置到弧的开始（由cx、cy和startAngle定义）

要解决这个问题，您需要移动到该位置

下面是一个更简单的演示，使用半圆形将

startAngle

设置为0 rad：

const canvas=document.createElement（“canvas”）；
document.body.append（画布）；
const ctx=canvas.getContext（“2d”）；
ctx.lineWidth=2；
常数cx=50；
常数cy=50；
常数rad=30；
ctx.beginPath（）；
ctx.moveTo（cx，cy）；
ctx.arc（cx，cy，rad，0，Math.PI）；
ctx.strokeStyle=“红色”；
ctx.stroke（）；
ctx.translate（80,0）；
常数第一点=cx+rad；//startAngle是0
//所以我们只需要加上“rad”
//找到x坐标
ctx.beginPath（）；
ctx.moveTo（第一个点，cy）；
ctx.arc（cx，cy，rad，0，Math.PI）；
ctx.strokeStyle=“绿色”；
ctx.stroke（）这是因为
弧
方法在内部跟踪从当前指针位置到弧起点的
行
（由cx、cy和startAngle定义）

要解决这个问题，您需要移动到该位置

下面是一个更简单的演示，使用半圆形将
startAngle
设置为0 rad：


const canvas=document.createElement（“canvas”）；
document.body.append（画布）；
const ctx=canvas.getContext（“2d”）；
ctx.lineWidth=2；
常数cx=50；
常数cy=50；
常数rad=30；
ctx.beginPath（）；
ctx.moveTo（cx，cy）；
ctx.arc（cx，cy，rad，0，Math.PI）；
ctx.strokeStyle=“红色”；
ctx.stroke（）；
ctx.translate（80,0）；
常数第一点=cx+rad；//startAngle是0
//所以我们只需要加上“rad”
//找到x坐标
ctx.beginPath（）；
ctx.moveTo（第一个点，cy）；
ctx.arc（cx，cy，rad，0，Math.PI）；
ctx.strokeStyle=“绿色”；
ctx.stroke（）终于明白那里发生了什么！非常感谢您的解释！！>终于明白那里发生了什么！非常感谢您的解释！！>