¿Alguna CSS o técnicas de JavaScript para mostrar un "corte" de una imagen circular?

Question

estoy tratando de escribir un programa en el que los usuarios subir imágenes circulares como esto deliciosamente cálido de pizza:

Entonces, el usuario especifica el inicio y el final del arco en grados, de manera que una función se llamará para mostrar la misma imagen, con una menor opacidad en la porción sobrante.

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

cutPizza(150, 225); 

¿Hay alguna CSS o JavaScript técnicas para ayudar a lograr esto (o cualquiera o formas para el caso)?

Answer 1

Sí, debe tener un lienzo que tenga una posición relativa a su imagen de pizza. A continuación, se puede dibujar su círculo sobre tela, lienzo y configurar la transparencia

Lea cómo dibujar círculos desde aquí:

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

Answer 2

Usted podría intentar generar un SVG y luego mirar en Clipping, Masking and Compositing