javascript-画布中图像的圆角

我有一个画布,里面有图像.我想在图像的两个角上放置圆角.我认为这样做的方式是使用全球操作符之一,但我似乎无法弄清楚该怎么做.

任何帮助,将不胜感激.

解决方法:

而不是使用全局运算符,而是找出要图像占用的空间(该路径应该是除圆角以外的矩形路径)

然后,在绘制图像之前将此路径放在上下文中,调用.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