javascript - 如何在矩形上画弧线？

Question

我知道我可以使用 moveTo()、lineTo() 方法来绘制不规则矩形，但是如果我想在矩形上创建弧线怎么办？

我的想法如下:我在两个 lineTo() 之间添加一个 arc()，并显示如下图。

function draw(){
    var c = document.getElementById("Canvas");
    var ctx = c.getContext("2d");

    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(40,40);
    ctx.lineTo(80,40);
    ctx.lineTo(80,80);
    ctx.arc(80,150,70,0.5*Math.PI,1.5*Math.PI,true);
    ctx.lineTo(80,260);
    ctx.lineTo(40,260);
    ctx.lineTo(40,40);
    ctx.stroke();
}

这不是我想要的结果，我想要呈现这样的图，圆弧和矩形之间没有线。

Answer 1

只需颠倒圆弧绘制顺序即可。您当前正在从 6 点钟到 12 点钟绘制它。

这里的关键点是 arc 确实包含 lineTo(startPoint.x, startPoint.y)，因此您需要处理这个问题。

如果你想保持这个顺序，你必须在绘制圆弧之前 moveTo 6 点钟方向，并在绘制圆弧之后再次 moveTo 6 点钟方向弧线。

function draw(){
    var ctx = c.getContext("2d");
    var rad = 70,
    w = 40,
    h = 220,
    x = 40,
    y = 40;
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(x, y); // top left
    ctx.lineTo(x + w, y); // top right
    // draw a line to the end of your arc
    ctx.lineTo(x + w, y + (h - (rad * 2)) / 2);
    // move to the start of the arc (6 o'clock)
    ctx.moveTo(x + w, y + ((h - (rad * 2)) / 2) + rad * 2);
    // draw the arc
    ctx.arc(x + w, y + h/2, rad, 0.5*Math.PI, 1.5*Math.PI, true);
    // move again to the start of the arc (6 o'clock)
    ctx.moveTo(x + w, y + ((h - (rad * 2)) / 2) + rad * 2);
    ctx.lineTo(x + w, y + h); // bottom right
    ctx.lineTo(x, y + h); // bottom left
    ctx.lineTo(x, y); // top right again
    ctx.stroke();
}
draw();

<canvas id="c" height="300"></canvas>

通过反转它，您可以避免这些 moveTo :

function draw() {
  var ctx = c.getContext("2d");
  var rad = 70,
    w = 40,
    h = 220,
    x = 40,
    y = 40;
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(x, y); // top left
  ctx.lineTo(x + w, y); // top right
  // to the start of the arc (12 o'clock)
  ctx.lineTo(x + w, y + (h - (rad * 2)) / 2);
  // draw the arc
  ctx.arc(x + w, y + h / 2, rad, 1.5 * Math.PI, 0.5 * Math.PI, false);
  ctx.lineTo(x + w, y + h); // bottom right
  ctx.lineTo(x, y + h); // bottom left
  ctx.lineTo(x, y); // top right again
  ctx.stroke();
}
draw();

<canvas id="c" height="300"></canvas>