Qualsiasi tecnica CSS o JavaScript per visualizzare una "porzione" di un'immagine circolare?

Question

che sto cercando di scrivere un programma in cui gli utenti caricano le immagini circolari come questa pizza deliziosamente caldo:

L'utente specifica quindi l'inizio e la fine dell'arco in gradi in modo che una funzione sarà chiamata a mostrare lo stesso immagine, con un'opacità inferiore sulla parte rimanente.

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

cutPizza(150, 225); 

Ci sono dei CSS o JavaScript tecniche per aiutarmi a raggiungere questo (o qualsiasi o modi per questo)?

Answer 1

Sì, si dovrebbe avere una tela che abbia una posizione relativa all'immagine della pizza. Quindi è possibile disegnare il vostro cerchio su tela, e configurare la trasparenza tela

Leggi come disegnare cerchi da qui:

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

Answer 2

Si potrebbe provare a generare una SVG e poi guardare in Clipping, Masking and Compositing