Home > Developer > JavaScript
<body><canvas id= "test" width= "height=" ></canvas><script type= "Text/javascript" >/ /a tool function for converting an angle from an angle system to a radian system function rads (x) {return math.pi*x/180;} var canvas = document.getElementById (' Test '), var c = Canvas.getcontext ("2d"),///Draw a graph, if necessary, zoom and rotate accordingly//because there is no current point , so the drawing does not require a straight line c.beginpath () between the current point and the beginning of the circle, C.arc (75,100,50,//Center is at (75,100), Radius is 500,rads (round), false), or//from 0 degrees to 360 clockwise rotation// Draw a wedge, angle from the x-axis positive clockwise measure//Note that the arc () method will connect the current point and arc starting point with a straight line C.moveto (200,100);//starting from the center of the Circle C.arc (200,100,50,//Center and RADIUS rads ( -60), rads (0),//from 60 degrees to 0 degrees false);//Clockwise C.closepath ()///RADIUS is added to the center//the same wedge, but the direction is different c.moveto (325,100); C.arc (325,100,50,rads (-60), Rads (0),//from 60 degrees to 0 degrees true);//Counter-clockwise C.closepath ();//Use the Acrto () method to draw fillets, draw a square with a point (400,50) bit in the upper-left corner with different radius angles C.moveto (450,50) ;//Start C.arcto (500,50,500,150,30) from the midpoint above,//Add part top and upper right corner c.arcto (500,150,400,150,20);//Add upper right corner and lower right corner c.arcto ( 400,150,400,50,10);//Add the bottom and sit-down corner c.arcto (400,50,500,50,0);//Add the upper left corner C.closepath ();//Two Bezier curve, one control point C.moveto (75,250); /Starting from the point (75,200) C.quadraticcurveto (100,200,175,250);//Draw a line up to the points (175, 250) End of Curve c.fillrect (100-3,200-3,6,6);//Mark Control Point (100,200)//Three Bezier curve C.moveto (200,250);//from point (200, 250) Start C.beziercurveto (220,220,280,280,300,250);//Draw a curve c.fillrect (200-3,220-3,6,6) that ends at a point (300,250);// Mark Control Point C.fillrect (280-3,280-3,6,6);//define some graphic properties and draw curves c.fillstyle= "#aaa"; c.linewidth = 5;c.fill (); </script></ Body>
Javascript+canvas drawing curves using Bezier curves
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
