HTML5 Canvas arc () function

Source: Internet
Author: User


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 () ;
Browser support

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 usage

The 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.

    • Center: Arc (75,50,0*math.pi,1.5*math.pi)
    • Starting angle: Arc (100,75,50,0,1.5*math.pi)
    • End Angle: Arc (100,75,50,0*MATH.PI,1.5*math.pi)
JavaScript Syntax:
Context.arc (x,y,r,sangle,eangle,counterclockwise);
Parameter values
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://" ></script><script src= "/http/ "></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 (); 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

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: 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.