javascript - 如何在矩形内画一个圆而不显示正方形的突出部分

Question

我正在尝试在画布上的正方形内绘制一个圆圈，但我不希望从正方形伸出的圆圈部分在屏幕上绘制。为了更好地解释自己，我放了几张图片。

这就是我得到的：

但这就是我想要得到的：

为此，我尝试将“ctx.arc”用于弯曲部分，将“ctx.moveTo”+“ctx.lineTo”用于与矩形边缘重合的直线，但尽管我没有成功然而，这将是一个相当繁琐的代码，这就是我问你的原因，因为也许有更简单的方法可以做到这一点，我还没有找到它，也没有想到它。

为了更清楚地说明，我放的图像是示例，但我需要的是通用代码，因为圆可以是任意大小并且其位置中心位于正方形内的任何位置。

谢谢你。

祝一切顺利。

标签： javascripthtmlcanvas

Answer 1

你可以用它clip()来切断圆圈的一部分。然后你根本不需要计算起点arc。

代码片段

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

// Clip a rectangular area
ctx.rect(50, 50, 200, 200);
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
ctx.fill();

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(70, 70, 120, 0, Math.PI * 2, true);
ctx.fill();

<canvas id="canvas" width="400" height="400"><canvas>