Understand Math Done For Endpoint In Canvas Arc
Given that i want to draw a circle in canvas that looks like below:
Now i am using the circliful plugin ,
Now the math done behind the scenes is like so:
if (type == 'angle') {
startAngle = 2.25 * Math.PI;
endAngle = 2.4;
circ = 1.53 + Math.PI;
quart = 0.73 + Math.PI / 0.996;
}
The above math gets used like so:
context.arc(x, y, radius, endAngle, startAngle, false);
Now i understand the math done for startAngle, but why endAngle = 2.4
? where does the 2.4
come from ?
I know it works perfectly, Why 2.4 ? can anybody explain ?
The line of code can be seen HERE.
Answer
2.4 is approximately 76% of a half circle.
The context.arc
function takes angles measured clockwise from positive x. With other words, the 2.4 indicates approximately going from the center to the bottom left at a 45 degree angle.
Similarly in the same code there's a snippet that says endAngle = 3.13
, which is nearly PI or nearly 180 degrees (so pointing to the left), that's used for half a circle.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM