Canvas two canvas drawing of dials, and canvas curve drawing

/** * Draw Circle * ARC (x, y, radius, starting Radian, end radian, direction of rotation) * x, y start position * radians vs. angle: radians = angle *math.pi/180 * Rotation direction: clockwise (default false), counterclockwise (true) */var OC = document.getElementById (' canvas '); var ogc = Oc.getcontext (' 2d ');//instance 1 draws a fan Ogc.moveto (200,200); Ogc.arc ( 200,200,150,0,90*math.pi/180,false); Ogc.arc (200,200,150,0,90*math.pi/180,true); Ogc.stroke ();//canvas dial function Todraw () {var x = 200;var y = 200;var r = 150;//9 empty canvas ogc.clearrect (0,0,oc.width,oc.height) per execution;//8 get time var odate = new Date var ohours = odate.gethours (), var omin = Odate.getminutes (); var oSec = Odate.getseconds (); var ohoursvalue = ( -90+ohours *30 + omin/2) *math.pi/180; var ominvalue = ( -90+omin*6) *math.pi/180;var osecvalue = ( -90+osec*6) *math.pi/180;/*ogc.moveto (x, y); Ogc.arc (X,y,r, 0,6*math.pi/180,false); Ogc.moveto (x, y), Ogc.arc (x,y,r,6*math.pi/180,12*math.pi*180,true) *///1 Draw Dial Ogc.beginpath ( ); for (Var i=0;i<60;i++) {Ogc.moveto (x, y); Ogc.arc (x,y,r,6*i*math.pi/180,6* (i+1) *math.pi/180,false);} Ogc.closepath (); Ogc.stroke ();//2 strips the dots to the scale, draws a circle and fills the color overlay Ogc.fillstyle = 'White '; Ogc.beginpath (); Ogc.moveto (x, y); Ogc.arc (X,y,r*19/20,0,360*math.pi/180,false); Ogc.closepath (); Ogc.fill () ;//3 draw the hour scale ogc.beginpath (); Ogc.linewidth=2;for (var i=0;i<12;i++) {Ogc.moveto (x, y) Ogc.arc (x,y,r,30*i*math.pi/ 180,30* (i+1) *math.pi/180,false);} Ogc.closepath (); Ogc.stroke ()//4 Remove the line with the hour scale, draw a circle and fill the color overlay ogc.fillstyle = ' white '; Ogc.beginpath (); Ogc.moveto (x, y); o Gc.arc (X,y,r*18/20,0,360*math.pi/180,false); Ogc.closepath (); Ogc.fill ();//5 Draw Hour Ogc.beginpath (); ogc.lineWidth = 5 ; Ogc.moveto (x, y); Ogc.arc (X,y,r*8/20,ohoursvalue,ohoursvalue,false); Ogc.closepath (); Ogc.stroke ();// 6 Draw the minute hand ogc.beginpath (); ogc.linewidth = 3;ogc.moveto (x, y); Ogc.arc (x,y,r*12/20,ominvalue,ominvalue,false); o Gc.closepath (); Ogc.stroke ();//7 Draw the second hand ogc.beginpath (); ogc.linewidth = 2;ogc.moveto (x, y); Ogc.arc (X,Y,R*16/20, Osecvalue,osecvalue,false); Ogc.closepath (); Ogc.stroke ();} Todraw (); SetInterval (function () {Todraw ();},1000);//////////////////////////////////////////** * Draw curve * Artto (x1,y1 , x2,y2,r); * X1,y1 first set of coordinates * X2,Y2 Second set of coordinates * r: Radius * BezierLine * Quadraticcurveto (dx,dy,x1,y1) * Bezier curve: First set of control points, second set of control points * Beziercurveto () * Bezier curve: First set of control points, second set of control points, third set of end points * * Canvas transform * tran Slate,rotate,scale */ogc.moveto (100,200); Ogc.arcto (100,100,200,100,50); Ogc.stroke ();// Quadraticcurvetoogc.moveto (100,200); Ogc.quadrativcurveto (100,200); Ogc.stroke ();//beziercurzetoogc.moveto ( 100,200); Ogc.beziercurveto (100,100,200,200,200,100); Ogc.stroke ();//canvas transform Ogc.translate (100,100); Ogc.rotate ( 45*math.pi/180); Ogc.scale (2,1); Ogc.fillrect (0,0,100,100);

Canvas two canvas drawing of dials, and canvas curve drawing