Menu
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)?
413
The main CSS property responsible for the circular shape is the border-radius property. Setting the radius of the corners to 50% of the width/height results in a circle.
The border-image-slice CSS property divides the image specified by border-image-source into regions. These regions form the components of an element's border image.
The arc() method creates an arc/curve (used to create circles, or parts of circles). Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math. PI. Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.
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.org/static/canvastutorial/ball.html
167
You could try generating a SVG and then look into Clipping, Masking and Compositing
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
