Any css or javascript techniques to display a 'slice' of a circle image? - Stack Overflow

admin管理员组

文章数量:1356851

I'm trying to write a program where users upload circular images like this deliciously warm pizza:

The user then specifies the start and end of the arc in degrees so that a function will be called to display the same image, with a lower opacity on the leftover portion.

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

cutPizza(150, 225);

Are there any css or javascript techniques to help me achieve this (Or any or ways for that matter)?

I'm trying to write a program where users upload circular images like this deliciously warm pizza:

The user then specifies the start and end of the arc in degrees so that a function will be called to display the same image, with a lower opacity on the leftover portion.

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

cutPizza(150, 225);

Are there any css or javascript techniques to help me achieve this (Or any or ways for that matter)?

• javascript
• css

Share Improve this question Follow asked Feb 29, 2012 at 7:37 user784637user784637 16.2k3333 gold badges9696 silver badges159159 bronze badges 3

• 5 +1 for 'deliciously warm pizza' – Sean Carruthers Commented Feb 29, 2012 at 7:39
• Can you show us what you have got so far? – Starx Commented Feb 29, 2012 at 7:40
• 1 I usually use Raphael for this sort of thing. Here's a vaguely related demo. – thirtydot Commented Feb 29, 2012 at 10:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Yes, you should have a canvas that has a relative position to your pizza image. Then you can draw your circle on canvas, and configure canvas transparency

Read how to draw circles from here:

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

You could try generating a SVG and then look into Clipping, Masking and Compositing

本文标签： Any css or javascript techniques to display a 39slice39 of a circle imageStack Overflow