如何在矩形內畫圓而不顯示正方形的突出部分

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>