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

Question

我想在 canvas 上的正方形内画一个圆圈，但我不想在屏幕上绘制出正方形外的圆圈部分。为了更好地解释我自己，我放了几张图片。

这是我得到的：

但这就是我想要得到的：

为此，我尝试将“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>

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

How to draw a circle inside a rectangle without showing the protruding parts of the square

html

javascript

canvas