有没有css或javascript技术来显示圆形图像的“切片”？

Question

我正在尝试编写一个程序，让用户上传圆形图像，比如这个美味的温热披萨：

​

然后，用户以度为单位指定弧的开始和结束，以便调用一个函数来显示相同的图像，剩余部分具有较低的不透明度。

function cutPizza (startArcDegree, endArcDegree){
//This is where I need help    
}

cutPizza(150, 225);

​

​

有没有什么css或javascript技术可以帮助我做到这一点(或任何或方法)？

Answer 1

是的，你应该有一个与你的比萨饼图像相对位置的画布。然后，您可以在画布上绘制圆，并配置画布透明度

阅读如何在此处绘制圆圈：

http://billmill.org/static/canvastutorial/ball.html

Answer 2

您可以尝试生成SVG，然后查看Clipping, Masking and Compositing