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

Intento escribir un progtwig donde los usuarios carguen imágenes circulares como esta pizza deliciosamente caliente: enter image description here

El usuario luego especifica el inicio y el final del arco en grados, de modo que se llamará a una function para que muestre la misma image, con una opacidad menor en la porción sobrante.

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

enter image description here

¿Hay alguna CSS o técnicas de JavaScript que me ayuden a lograr esto? ¿O de alguna manera?

2 Solutions collect form web for “¿Alguna CSS o técnicas de JavaScript para mostrar un "corte" de una image circular?”

Sí, debe tener un canvas que tenga una position relativa a su image de pizza. Luego puede dibujar su círculo en el canvas y configurar la transparencia del canvas

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

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

Podrías intentar generar un SVG y luego mirar en Clipping, Masking y Compositing

  • diapositiva de inhabilitación en la dirección particular angularjs ionic framework
  • ¿Es buena idea detectar la resolución de pantalla para cargar CSS alternativo?
  • Descubre la altura de los divs y establece la altura de div
  • ¿Cómo cambiar dinámicamente la label de estilo usando JavaScript?
  • Las transiciones CSS no funcionan cuando se asignan a través de JavaScript
  • Ocultar / Mostrar barra de desplazamiento de la networking Kendo
  • ¿Puedo ocultar el cuadro de giro de la input del número HTML5?
  • Técnicas para una animation de image más suave con JS / CSS
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.