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

Question

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

这就是我得到的：

但这就是我想要得到的：

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

为了进一步澄清，我放置的图像是示例，但我需要的是一个通用代码，因为圆圈可以是任何大小，并且在正方形内的任何位置都有其中心位置。

谢谢你。

一切顺利。

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>