画布上的图像上的圆角 [英] Rounded corners on images in canvas

问题描述

我的画布里面有一个图像。我想在图像的两个角上放置圆角。我在想这样做的方法是使用全球运营商之一，但我似乎无法弄明白我是怎么做的。

I have a canvas with an image inside it. I'm looking to put rounded corners on two corners of the image. I am thinking the way to do it would be use one of the global operators but I can't seem to figure out how I'd do that.

任何帮助都会赞赏。

推荐答案

不要使用全局运算符，而是找出你想要图像占用的空间（应该是除了圆角之外的矩形路径）

Instead of using a global operator, figure out the space that you want the image to occupy (which should be a path that is a rectangle except for the rounded corners)

然后在绘制图像之前将此路径放在上下文中，调用.clip（），然后绘制图像。

Then put this path on the context before you draw your image, call .clip(), and then draw the image.

然后在图像的两个角上用圆角绘制图像。

The image will then be drawn with rounded corners on the two corners of the image.

所以你现在唯一真正的任务是提出你需要的道路。

So your only real task now is coming up with the path you need to do it.

简而言之：

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

这篇关于画布上的图像上的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！