移动圆弧上出现半径线

Question

我试图创建这些移动的形状，该形状由半圆形和对称的上弧和下弧组成。它们应该只是前面的形状，但现在当它们移动时，后面会拖着一条像尾巴一样的线。 这些线似乎来自上下弧的 moveTo 部分，但我不知道如何解决它。我应该在哪里改变才能摆脱它？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();    }

Answer 1

这是因为该arc方法在内部跟踪 alineTo从当前指针的位置到弧的开头（由 cx、cy和startAngle 定义）。

要解决这个问题，您需要处于moveTo该位置。

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

const canvas = document.createElement( "canvas" );

document.body.append( canvas );

const ctx = canvas.getContext( "2d" );

ctx.lineWidth = 2;

const cx = 50;

const cy = 50;

const rad = 30;

ctx.beginPath();

ctx.moveTo( cx, cy );

ctx.arc( cx, cy, rad, 0, Math.PI );

ctx.strokeStyle = "red";

ctx.stroke();

ctx.translate( 80, 0 );

const first_point_x = cx + rad; // startAngle is 0

                                // so we just have to add 'rad'

                                // to find the x coord

ctx.beginPath();

ctx.moveTo( first_point_x, cy );

ctx.arc( cx, cy, rad, 0, Math.PI );

ctx.strokeStyle = "green";

ctx.stroke();

因此，您必须计算弧线起点和moveTo该点的坐标。
这是可行的，但我对 trigo 不是最好的，并且您的值非常复杂，因此，这里有一个使用 Path2D 对象的解决方法。
如果该arc命令是子路径的第一个，它将直接指向moveTo该初始点（因为还没有“当前指针的位置”）。
因此，我们可以将所有弧初始化为独立的 Path2D 对象，仅由这些arc命令组成。然后我们只需将这些 Path2D 对象合并到最后一个对象中并绘制它：

const canvas = document.createElement("canvas");

document.body.append(canvas);

const c = canvas.getContext("2d");

c.lineWidth = 2;

const fish = new Fish(150, 50, 50, 50, 50);

fish.draw();

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() {

    const p1 = new Path2D();

    p1.arc(this.x / 0.6, this.y, this.radius, Math.PI * 1.5, Math.PI * 0.5, false)

    //Upper Arc

    const p2 = new Path2D();

    p2.arc(this.x / 0.6, this.y + (3 * this.radius), this.radius * 4, Math.PI * 229 / 180, Math.PI * 1.5, false)

    //Lower Arc

    const p3 = new Path2D();

    p3.arc(this.x / 0.6, this.y - (3 * this.radius), this.radius * 4, Math.PI * 131 / 180, Math.PI * 0.5, true)

    // merge in a single Path2D object

    const path = new Path2D();

    path.addPath(p1);

    path.addPath(p2);

    path.addPath(p3);

    

    c.strokeStyle = "green";

    c.stroke(path);

    

  }

}

但在您的情况下，通过更改绘制 Path 的顺序并且从不调用moveTo.

const canvas = document.createElement("canvas");

document.body.append(canvas);

const c = canvas.getContext("2d");

c.lineWidth = 2;

const fish = new Fish(150, 50, 50, 50, 50);

fish.draw();

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)

    // Lower Arc    

    c.arc(this.x / 0.6, this.y - (3 * this.radius), this.radius * 4, Math.PI * 0.5, Math.PI * 131 / 180, false)

    // Upper Arc

    // (inverse startAngle and endAngle + switch swipe to false)

    c.arc(this.x / 0.6, this.y + (3 * this.radius), this.radius * 4, Math.PI * 229 / 180, Math.PI * 1.5, false)

    c.strokeStyle = "green";

    c.stroke();

  }

}