Javascript 如何使用背景图像创建圆弧（扇形）？

我正在寻找一种方法来画一个给定角度的圆扇区。我希望此扇区显示一个（1:1）图像作为其背景（仅显示扇区下方的平方维图像部分）

基本上，图像将具有相同的宽度和高度。图像的宽度和高度将等于显示扇区的圆的直径。我希望图像和扇区保持它们的纵横比，但要有响应能力。我需要他们的大小是在百分比或类似的东西，而不是像素，所以他们是响应页面大小的变化。我曾尝试使用SVG路径来实现这一点，但到目前为止，我还没有完全实现我的目标

我尝试做的第一件事是设置我正在制作的SVG的背景图像。我提到了这把小提琴：最后在这篇文章中尝试了答案： 接下来，我试图找到一种方法，在给定角度的情况下制作一个圆形扇形，并在这里找到了一个惊人的答案：然而，这个答案并没有使用背景图像，所以现在将这两个东西合并在一起对我来说不起作用。我最终得到了

这里需要注意的是：图片的尺寸不等于直径，图片也在重复。另外，这里的SVG和路径大小是不同的，我希望SVG与背景图片的大小相等，内部路径的直径与平方SVG的尺寸相等

代码如下：

函数极坐标（centerX、centerY、半径、角度等）{
var angleInRadians=（angleInDegrees-90）*Math.PI/180.0；
返回{
x:centerX+（半径*数学坐标（角半径）），
y：中心y+（半径*数学正弦（角度半径））
};
}
函数描述C（x，y，半径，星形，端角）{
var起点=极笛卡尔坐标（x，y，半径，端角）；
var end=极笛卡尔坐标（x，y，半径，星形）；
VaRealErgCalgay= Engurn= StordPox
我将考虑两个我以前的回答，以便用<代码>剪辑路径< /> >。技巧很简单，我们使图像四舍五入，然后使用剪辑路径显示/隐藏所需的部分。< /P>
以下是一个基本示例：

.box{
宽度：150px；
高度：150像素；
背景：url(https://picsum.photos/id/1003/300/300)中心/盖；
剪辑路径：多边形（50%50%，0.0，0.50%）；
边界半径：50%；
}

您好，这是一个很好的解决方案。您能解释一下使用这两个示例（剪辑路径和遮罩图像）的方法吗对于不同的角度/百分比，因为我在使用时遇到了一些困难。如果我只知道如何插入相关值，这似乎是一个很好的解决方案。我想从0度到360度。@MakhdoomImtiaz将尝试为剪辑路径一添加更多细节，但遮罩图像很容易…您只需定义截面从何处开始（从何处开始），以度为单位，然后定义其角度（我使用的是60度），尝试更改值，您将很容易理解。是的，我研究了剪裁方法，我理解它，并得出结论，它需要大量的点和工作。但是，遮罩图像方法工作非常出色。我建议您先使用该方法，直到您在回答中完全解释如何复制剪辑路径也是一样。@MakhdoomImtiaz我没有把它放在第一位，因为它使用了新的功能，但不受很好的支持，目前只有chrome和safari支持圆锥渐变。Firefox不支持，但支持会增加soon@MakhdoomImtiaz添加了另一个想法，并解释了计算