畫布上的圖像上的圓角

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