Canvas Javascript 圆圈撕裂

Question

我正在尝试从 Javascript 中的圆圈中画一条线。看正方形，我希望它看起来像那样。

出于某种原因，圆圈沿着直线的路径而不是完全不同的元素。我非常困惑。是否应该为该线路实施一些停止条件？

这是用来绘制的代码：

if (this.sex == "Male") {
      // Relation Line
      // TODO: Setup so this shows only if it has a
      c.beginPath()
      c.moveTo((this.x + (this.x / 4)), (this.y + (this.y / 4)))
      c.lineTo((this.x + (this.x / 4)), (this.y + (this.y / 4)) + 60)
      c.stroke()
      // END Relation Line
      // Shape
      c.rect(this.x, this.y, 50, 50)
      c.fillStyle = 'blue'
    }
    else {
      // Relation Line
      // TODO: Setup so this shows only if it has a
      c.beginPath()
      c.moveTo(this.x, this.y + 30)
      c.lineTo(this.x, this.y + 60)
      c.stroke()
      // END Relation Line
      // Shape
      c.arc(this.x, this.y, 30, 0, Math.PI * 2, false)
      c.fillStyle = 'pink'
    }
    c.fill()

这存储在动画函数内部调用的绘图函数中。

Answer 1

填充形状会将路径的末端与其起点连接起来。以 beginPath

开始新形状

function a(x, y) {
      this.x = x;
      this.y = y;
      var c = document.getElementById('shape').getContext('2d');

// Relation Line
      // TODO: Setup so this shows only if it has a
      c.beginPath()
      c.moveTo(this.x, this.y + 30)
      c.lineTo(this.x, this.y + 60)
      c.stroke()
      // END Relation Line
      // Shape
      c.arc(this.x, this.y, 30, 0, Math.PI * 2, false)
      c.fillStyle = 'pink'
      c.fill()
    
}

function b(x, y) {
      this.x = x;
      this.y = y;
      var c = document.getElementById('shape').getContext('2d');

      // Relation Line
      // TODO: Setup so this shows only if it has a
      c.beginPath()
      c.moveTo(this.x, this.y + 30)
      c.lineTo(this.x, this.y + 60)
      c.stroke()
      // END Relation Line
      // Shape
      c.beginPath()
      c.arc(this.x, this.y, 30, 0, Math.PI * 2, false)
      c.fillStyle = 'pink'
      c.fill()        
}

new a(50, 50);
new b(150, 50);

<canvas id="shape"></canvas>

Canvas Javascript 圆圈撕裂

Canvas Circle Tear in Javascript

html

javascript

html5-canvas