arc(): Drawing Circles and Arc on Canvas

gctx.arc(150,100,40,0,1.0*Math.PI);
x: Horizontal coordinate from left edge
y: Vertical coordinate from Top
r : Radius of Arc or Circle
startAngle: Staring angle in radian
endAngle: Ending angle in radian
direction : (optional) Boolean. True for anticlockwise , False ( default ) for clockwise direction of arc
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.arc(10,100,40,0,0.5*Math.PI);
gctx.stroke();
Drawing Arc ( All Angles in Radian )
gctx.arc(100,100,40,1.2*Math.PI,1.8*Math.PI,false);
gctx.stroke();
Drawing Arc ( Input Angles in degree )
var startAngle=40 // In degree 
var endAngle=180 // In degree 
var angle1=(1/180) * startAngle; // In Radian
var angle2=(1/180) * endAngle; // In Radian 
gctx.arc(100,100,40,angle1*Math.PI,angle2*Math.PI,true);
gctx.stroke();
Drawing Arc with strokeStyle()
gctx.arc(100,100,40,1.2*Math.PI,1.8*Math.PI,false);
gctx.strokeStyle= 'red';
gctx.stroke();
Drawing Arc with fillStyle()
gctx.arc(100,100,40,1.2*Math.PI,1.8*Math.PI,false);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();
Drawing a Circle
gctx.arc(100,100,40,0,2*Math.PI);
gctx.stroke();
Drawing Circle with strokeStyle()
gctx.arc(100,100,40,0,2*Math.PI);
gctx.strokeStyle= 'red';
gctx.stroke();
Drawing Circle with fillStyle()
var gctx = my_canvas6.getContext("2d");
gctx.arc(100,100,40,0,2*Math.PI);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();
Drawing Circle with fillStyle() & strokeStyle()
gctx.strokeStyle= 'blue'; // circumference of circle colour
gctx.arc(100,100,40,0,2*Math.PI);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();
Drawing Circle with fillStyle() & lineWidth()
gctx.strokeStyle= 'blue';
gctx.lineWidth=10;
gctx.arc(100,100,40,0,2*Math.PI);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer