Home > Developer > Web Develop
1<! DOCTYPE html>234<title>insert you title</title>5<meta name= ' description ' content= ' This is my page ' >6<meta name= ' keywords ' content= ' keyword1,keyword2,keyword3 ' >7<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">8<link rel= ' stylesheet ' type= ' text/css ' href= './css/index.css '/>9<script type= ' text/javascript ' src= './js/jquery-1.12.1.min.js ' ></script>Ten<style type= ' text/css ' > One Html,body,canvas { Amargin:0; padding:0; - } - the HTML { -Background: #999; - } - + #can { -Background: #FFF; Display:block; MARGIN:75PX Auto; border-radius:2px; + } A</style> at<script type= ' Text/javascript ' > -$(function(){ - varOcan = $ (' #can '). Get (0). GetContext (' 2d ' ); - Ocan.beginpath (); - /* - in Draw curves (circular curves): - Ocan.arcto (x1,y1,x2,y2,r) Explanation: Create an arc between two tangents on the canvas: Start coordinate 1, end coordinate 2, radius (adjust radius to achieve different effects) to here are a few questions to address: + One: - Why can't I draw a curve when I don't set Ocan.moveto () and only set Ocan.arcto ()? the Two: * Why do we not know how to draw the circle when we set the coordinate point? $ Panax Notoginseng Draw curve two (curved curve): - Ocan.quadraticcurveto (); World two cubic curve (draw a two-time Bezier curve:) the Definition and Usage + The Quadraticcurveto (dx,dy,x1,y1) method adds a point to the current path by using a specified control point that represents a two-time Bezier curve. Dx,dy: Control point x1,y1 End coordinates A Tip: The two-time Bezier curve requires two points. The first point is for the control point in the two-time Bezier calculation, and the second point is the end point of the curve. The start point of the curve is the last point in the current path. If the path does not exist, the then use the Beginpath () and MoveTo () methods to define the start point. + - Draw Curve three (S-curve): $ Definition and Usage $ The Beziercurveto (dx1,dy1,dx2,dy2,x1,y1) method adds a point to the current path by using a specified control point that represents a three-time Bezier curve. Dx,dy: Control point x1,y1 End coordinates - Tip: The three-time Bezier curve requires three points. The first two points are for the control points in the three-time Bezier calculation, and the third point is the end point of the curve. The start point of the curve is the last point in the current path. If the path does not exist, - then use the Beginpath () and MoveTo () methods to define the start point. the Wuyi */ the /* - Wu //Use ArcTo to create curves - Ocan.moveto (250, 250);//create Start point About Ocan.arcto ( +, +,--); $ Ocan.arc (2, 0, 2 * Math.PI, true);//Auxiliary - Ocan.arc (2, 0, 2 * Math.PI, true);//Auxiliary - Ocan.arc (2, 0, 2 * Math.PI, true); Auxiliary - Ocan.closepath (); A Ocan.stroke (); + the */ - $ /* the the //Use Quadraticcurveto to create curves the Ocan.moveto (250, 250);/* Create start point the Ocan.quadraticcurveto (100, 300, 50, 150); The curve size is directly related to the control point, and you can adjust the coordinates of the control point to view it (the curve is the arc between the two tangents) - Ocan.arc (2, 0, 2 * Math.PI, true);//Auxiliary in Ocan.arc (2, 0, 2 * Math.PI, true);//Auxiliary the Ocan.arc (2, 0, 2 * Math.PI, true); Auxiliary the Ocan.closepath (); About Ocan.stroke (); the the */ the + //use Beziercurveto to create curves -Ocan.moveto (250, 250);//Create a start point theOcan.beziercurveto (150, 300, 450, 350, 50, 500 );BayiOcan.arc (2, 0, 2 * math.pi,true);//Auxiliary theOcan.arc (2, 0, 2 * math.pi,true);//Auxiliary theOcan.arc (2, 0, 2 * math.pi,true);//Auxiliary -Ocan.arc (2, 0, 2 * math.pi,true);//Auxiliary - Ocan.stroke (); the Ocan.closepath (); the } ); the</script> the -<body> the<canvas id= ' can ' width= ' height= ' > Your browser version is too low, please upgrade your browser ...</canvas> the</body> the
[HTML canvas drawing curve three ways] canvas drawing curves Three methods attribute instance demonstration
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
