function () { var canvas = document.getElementById ("Canvas"), = Canvas.getcontext ("2d" ); Context.beginpath (); Context.moveto (0,300); for (var x = 1; x < +) { var y = + math.sin (x * 0.02) *100; Context.lineto (x, y); } Context.stroke ();};
Quadraticcurveto () & Beziercurveto ():
Window.onload =function() { varCanvas = document.getElementById ("Canvas"), Context= Canvas.getcontext ("2d"); varP0 ={x:math.random ()* 600, Y:math.random ()* 600 }; varP1 ={x:math.random ()* 600, Y:math.random ()* 600 }; varP2 ={x:math.random ()* 600, Y:math.random ()* 600 }; Context.beginpath (); Context.moveto (p0.x, P0.Y); Context.quadraticcurveto (p1.x, P1.y, p2.x, P2.Y); Context.stroke (); Context.closepath (); Drawpoint (P0); Drawpoint (p1); Drawpoint (p2); functionDrawpoint (P) {Context.fillrect (p.x-4, P.y-4, 8, 8); }};
Window.onload =function() { varCanvas = document.getElementById ("Canvas"), Context= Canvas.getcontext ("2d"); varP0 ={x:math.random ()* 600, Y:math.random ()* 600 }; varP1 ={x:math.random ()* 600, Y:math.random ()* 600 }; varP2 ={x:math.random ()* 600, Y:math.random ()* 600 }; varP3 ={x:math.random ()* 600, Y:math.random ()* 600 }; Context.beginpath (); Context.moveto (p0.x, P0.Y); Context.beziercurveto (p1.x, P1.y, p2.x, P2.y, p3.x, P3.Y); Context.stroke (); Context.closepath (); Drawpoint (P0); Drawpoint (p1); Drawpoint (p2); Drawpoint (p3); functionDrawpoint (P) {Context.fillrect (p.x-4, P.y-4, 8, 8); }};
function () { var canvas = document.getElementById ("Canvas"), = Canvas.getcontext ("2d" ); Context.beginpath (); Context.arc (200,200,100,0,2); Context.stroke (); Context.closepath (); Context.beginpath (); Context.arc (true); Context.stroke (); Context.closepath ();};
function () { var canvas = document.getElementById ("Canvas"), = Canvas.getcontext ("2d" ); Context.beginpath (); Context.arc (300,300,100,0, Math.PI * 2); Context.stroke (); Context.closepath ();};
[Javascript] Drawing Paths-curves and Arcs