Любые методы 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