如何僅在特定區域內繪制圓？

Question

因此，我有一個在畫布上繪制的圓圈，它會根據設置更改大小。 但是，如果設置得太高，則圓圈大於其保留區域，並與畫布中的其他東西重疊。

畫完框后，我目前正在擦除框周圍的區域，但這會造成困難。 我基本上必須在它周圍繪制兩次，因為我需要最后繪制圓。 這使得在所述周圍區域中執行點擊動作更加困難，因為點擊被記錄了兩次。

TL; RD：在畫布上繪制圓形之前，我該如何遮蓋它的一部分？

Answer 1

為此，您可以使用clip（）函數。

       context.rect(50,50,200,200);//the area in which the circle is to be drawn
       context.save();//saved context so it can be restored later
       context.clip();
       //now draw your circle
       context.restore(); //remove the clip

僅繪制給定矩形內的區域。

這是一個很好的關於這個主題的教程 。