画布上的图像上的圆角

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