Home > Developer > Web Develop
Create a circle:
var c=document.getelementbyid ("MyCanvas"); var ctx=c.getcontext ("2d"); Ctx.beginpath (); Ctx.arc (100,75,50,0,2*Math.PI); Ctx.stroke () ;Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the arc () method.
Note: Internet Explorer 8 or earlier browsers do not support the <canvas> element.
Definition and usageThe arc () method creates an arc/curve (used to create a circle or a partial circle).
Tip: To create a circle through arc (), set the starting angle to 0 and the end angle to 2*math.pi.
Tip: Use the stroke () or fill () method to draw the actual arc on the canvas.
Parameter valuesContext.arc (x,y,r,sangle,eangle,counterclockwise);
| Parameters | Description |
|---|---|
| X | The x-coordinate of the center of the circle. |
| Y | The y-coordinate of the center of the circle. |
| R | The radius of the circle. |
| Sangle | The starting angle, measured in radians. (The arc's circular three o'clock position is 0 degrees). |
| Eangle | The end angle, measured in radians. |
| Counterclockwise | Optional. The rules should be plotted counterclockwise or clockwise. False = clockwise, true = counterclockwise. |
Introduce the syntax of the curve for you. If you want to create a circle, we can use the arc () method.
Syntax: Arc (defines a center point, radius, start angle, end angle, and drawing direction: clockwise or counterclockwise)
Code: CONTEXT.ARC (CenterX, CenterY, radius, StartingAngle, Endingangle, anticlockwise);
HTML5 Canvas ARC Description:
Gossip Chart Example code:
The program effect is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8" /><title>Untitled Document</title><!--below excanvas.js need to download in order to support canvas under IE -<!--[If Ie]><script src= "Http://a.tbcdn.cn/p/fp/2011a/html5.js" ></script><script src= "/http/ Api.html5media.info/1.1.4/html5media.min.js "></script><script src=" Excanvas.js "></script> <! [EndIf] -<Scripttype= "Text/javascript">window.onload= function(){ varCTX=document.getelementbyidx_x_x_x ("pic"). GetContext ('2d'); //the code for drawing the white semicircle is as follows:Ctx.beginpath (); Ctx.arc ( $, $, the,1.5*Math.pi,math.pi/2,false);Ctx.fillstyle=" White"; Ctx.closepath (); Ctx.fill (); //the code for drawing the black semicircle is as follows:Ctx.beginpath (); Ctx.arc ( $, $, the, Math.PI/2,1.5*math.pi,false);Ctx.fillstyle="Black"; Ctx.closepath (); Ctx.fill (); //draw a small black circleCtx.beginpath (); Ctx.arc ( $, -, +,0, Math.PI*2,true); Ctx.fillstyle="Black"; Ctx.closepath (); Ctx.fill (); //draw a small white circleCtx.beginpath (); Ctx.arc ( $, the, +,0, Math.PI*2,true); Ctx.fillstyle=" White"; Ctx.closepath (); Ctx.fill (); //draw a small white centerCtx.beginpath (); Ctx.arc ( $, the,5,0, Math.PI*2,true); Ctx.fillstyle="Black"; Ctx.closepath (); Ctx.fill (); //draw a small black centerCtx.beginpath (); Ctx.arc ( $, -,5,0, Math.PI*2,true); Ctx.fillstyle=" White"; Ctx.closepath (); Ctx.fill (); //Draw the text code as follows:Ctx.save (); Ctx.fillstyle="Black"; Ctx.globalalpha="0.4"; Ctx.textalign="Center"; Ctx.font="32px Arial"; Ctx.shadowcolor="Rgba (0,0,0,0.4)"; Ctx.shadowoffsetx= the; Ctx.shadowoffsety=-Ten; Ctx.shadowblur=2; Ctx.filltext ('Hello Canavs', $, -);//IE does not supportCtx.restore ();}</Script></Head><Body><CanvasID= "Pic"width= "The "Height= "The "style= "border:1px solid; background: #E1E1FF;"></Canvas></Body></HTML>
HTML5 Canvas arc () function
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
