javascript - 如何在 HTML Canvas 中制作两个连接的开放弧(没有水平线)？

Question

这个问题已经有答案了:

An extra unwanted line using the arc() method in Canvas (1 个回答)

已关闭 4 年前。

我对 HTML 中的 canvas 元素不熟悉，我正在尝试制作类似 ~ 的东西使用.arc()方法。

这是我的代码:(或 JSFiddle )

HTML

    <canvas height = "500" width = "500" id = "myCanvas"></canvas>

Javascript

    let canvas = document.getElementById('myCanvas');
    let ctx = canvas.getContext("2d");

    ctx.strokeStyle = '#000';
    ctx.fillStyle = "red";
    ctx.lineWidth = 3;

    ctx.beginPath();
    ctx.arc(50, 50, 50, 0, Math.PI, true);
    ctx.arc(150, 50, 50, 0, Math.PI);
    ctx.fill();
    ctx.stroke(); 

我得到一条连接两个相连半圆的起点和终点的水平线。我怎样才能删除它？

Answer 1

您需要moveTo第二个圆弧的开头:cx + rad, cy

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext("2d");

ctx.strokeStyle = '#000';
ctx.fillStyle = "red";
ctx.lineWidth = 3;

ctx.beginPath();
ctx.arc(50, 50, 50, 0, Math.PI, true);
// move the pointer to the next drawing point without tracing anything
ctx.moveTo(150 + 50, 50);
ctx.arc(150, 50, 50, 0, Math.PI);
ctx.fill();
ctx.stroke();

<canvas height="500" width="500" id="myCanvas"></canvas>