Home > Developer > Web Develop
First, ARC
(x0,y0) Current coordinate point, (x1,y1) control point coordinate,(x2,y2) arc End coordinate
Context.arcto (X1,Y1,X2,Y2,RADIUSX)
二、二次 Bezier Curve
starting point:moveTo (20,20)
Control Point 1:quadraticcurveto (20,100, 200,20)
end point:Quadraticcurveto (20,100,200,20)
Context. Quadraticcurveto (Cpx,cpy,x,y)
(cpx,cpy) control point coordinates, (x,y) endpoint coordinates
三、三次 Bezier Curve
starting point:moveTo (20,20)
Control Point 1:beziercurveto (20,100, 200,100,200,20)
Control Point 2:beziercurveto (20,100,200,100, 200,20)
end point:Beziercurveto (20,100,200,100,200,20)
Context.beziercurveto (Cp1x,cp1y,cp2x,cp2y,x,y);
(cp1x,cp1y) First control point, (cp2x,cp2y) Second control Point, (x,y) end point
1 <HTML>2 <Head>3 <MetaCharSet= "UTF-8">4 <title>Arc-Two-time Bezier curve-three times Bezier curve</title>5 <Metaname= "Viewport"content= "Width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />6 7 </Head>8 <Body>9 <CanvasID= "Canvas"width= "$"Height= "$"></Canvas>Ten <Scripttype= "Text/javascript"> One varOcanvas=document.getElementById ("Canvas"); A varContext=Ocanvas.getcontext ("2d"); - Context.fillstyle= "#ededed"; - Context.fillrect (0, 0, -, -); the //Arc - Context.beginpath ();//Start Point - Context.moveto ( $, -);//x0y0: Start, change X0 controllable - Context.arcto ( the, -, the, $, -);//x1y1 Control point:, X2y2: End point, Radius + Context.stroke (); - Context.closepath ();//End Point + //two times Bezier curve A Context.beginpath ();//Start at Context.moveto ( $, $);//Start Point - Context.quadraticcurveto ( -, -, -, the);//(cpx,cpy,x,y): (cpx,cpy) control point coordinates, (x, y) endpoint coordinates - Context.stroke ();//Strokes - Context.closepath ();//Close - //three times Bezier curve - Context.beginpath ();//Start in Context.moveto ( -, -);//Start Point - Context.quadraticcurveto ( the, -, -, the, -,260);//(cp1x,cp1y,cp2x,cp2y,x,y):(cp1x,cp1y) first control point, (cp2x,cp2y) second control point, (x, y) end Point to Context.stroke ();//Strokes + Context.closepath ();//Close - </Script> the </Body> * </HTML>
HTML5 Canvas 4 Drawing 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
