Home > Developer > Web Develop
In addition to ARC (), the canvas's drawing environment object also provides another way to create an arc path, which is ArcTo (). The modification method accepts 5 parameters:
ArcTo (X1,x2,y1,y2,radius)
The parameters of the ArcTo () method represent two click Round radii, respectively. The method draws an arc with the specified radius, which is tangent to the line of the current point to the first point (X1,y1), and the line to the first point to the 2nd (x2,y2) is tangent. These characteristics of the method make it very suitable for drawing the original angle of the rectangle.
Use the ArcTo () method:
Html:
<! Doctyp html>
<title>rounded rectangles</title>
<style>
#canvas {
Background:lightskyblue;
-webkit-box-shadow:4px 4px 8px Rgba (0,0,0,0.5);
-moz-box-shadow:4px 4px 8px Rgba (0,0,0,0.5);
box-shadow:4px 4px 8px Rgba (0,0,0,0.5);
}
</style>
<body>
<canvas id= ' canvas ' width= ' 575 ' height= ' >
Canvas not supported
</canvas>
<script src= ' example.js ' ></script>
</body>
Example.js
var context = document.getElementById (' canvas '). GetContext (' 2d '); function Roundedrect (Cornerx, cornery, width, height , Cornerradius) {if (width > 0) context.moveto (Cornerx + Cornerradius, cornery); else Context.moveto (Cornerx-cornerradius, cornery); Context.arcto (Cornerx + width, cornery, Cornerx + width, cornery + height, cornerradius); Context.arcto (Cornerx + width, cornery + height, Cornerx, cornery + height, Cornerradius ); Context.arcto (Cornerx, cornery + height, Cornerx, cornery, Cornerradius); if (Width > 0) {context.arcto (Cornerx, cornery, Cornerx + Cornerradius, Cornery, Cornerradius); } else {context.arcto (Cornerx, Cornery, Cornerx-cornerradius, Cornery, cor Nerradius); }}function Drawroundedrect (Strokestyle, FillStyle, Cornerx, cornery, width, height, cornerRadius) {Context.beginpath (); Roundedrect (Cornerx, cornery, width, height, cornerradius); Context.strokestyle = Strokestyle; Context.fillstyle = FillStyle; Context.stroke (); Context.fill ();} Drawroundedrect (' Blue ', ' yellow ', ten, 275, +, +),;d rawroundedrect (' Purple ', ' green ', + 100, 100, 20) );d rawroundedrect (' Red ', ' white ', 525, 140, -100, +);d rawroundedrect (' White '), ' Blue ', the--and the--and the-100-100, 40);View Code
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
