arcTo(): Drawing Curves using control points on Canvas
x1: First control point x coordinatey1: First control point y coordinate x2: Second control point x coordinate y2: Second control point y coordinate r : Radius of Arc or Circle ( Positive only ) var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.beginPath();
gctx.strokeStyle = 'gray';
gctx.lineWidth = 4;
gctx.moveTo(120, 20);
gctx.lineTo(230,20);
gctx.lineTo(230,180);
gctx.stroke();
///First graph, draw the arc ///
gctx.beginPath();
gctx.moveTo(120, 20);
gctx.strokeStyle = 'red';
gctx.lineWidth = 1;
gctx.arcTo(230,20,230,180,80);
gctx.stroke();
This article is written by plus2net.com team.
|