Javascript+canvas drawing curves using Bezier curves

Source: Internet
Author: User

<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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.