畫布上的圖像圓角

Question

我有一個畫布，裏面有圖像。我正在尋找在圖像的兩個角落放置圓角。我正在想辦法做到這一點將使用全球運營商之一，但我似乎無法弄清楚我會如何做到這一點。

任何幫助，將不勝感激。

Answer 1

而不是使用一個全球運營的，弄清楚你想要的形象佔據的空間（這應該是除了圓角矩形的路徑）

然後把上下文之前，這條道路您繪製圖像，調用.clip（），然後繪製圖像。

然後圖像將在圖像的兩個角上用圓角繪製。

因此，您現在唯一真正的任務就是提供您需要的路徑。

簡而言之：

ctx.save(); 
ctx.beginPath(); 
// use lineTo and BezierTo here to make the path you want, which is a rectangle the size of the image with two rounded corners. 
ctx.closePath(); 
ctx.clip(); 

// draw the image 
ctx.restore(); // so clipping path won't affect anything else drawn afterwards