To create an arc canvas, we can use the arc () method.
Syntax: arc (defines a center point, radius, start angle, end angle, and drawing direction: clockwise or counterclockwise)
Code:
Copy the content to the clipboard using JavaScript Code
Context. arc (centerX, centerY, radius, startingAngle, endingAngle, antiClockwise );
HTML5 Canvas Arc example:
Copy XML/HTML Code to clipboard
<! Doctype html>
<Html>
<Head>
<Title> html5 canvas Arc </title>
<Style>
Body {margin: 0px; padding: 0px ;}
# MyCanvas {border: 1px solid #9C9898; margin: 0 auto; margin-top: 200px; margin-left: 100px ;}
</Style> www.2cto.com
<Script>
Window. onload = function (){
Var canvas = document. getElementById ("myCanvas ");
Var context = canvas. getContext ("2d ");
Var centerx= 288;
Var centerY = 160;
Var radius = 75;
Var startingAngle = 1.1 * Math. PI;
Var endingAngle = 1.9 * Math. PI;
Var counterclockwise = false;
Context. arc (centerX, centerY, radius, startingAngle, endingAngle, counterclockwise );
Context. lineWidth = 15;
Context. strokeStyle = "black"; // line color
Context. stroke ();
};
</Script>
</Head>
<Body>
<Canvas id = "myCanvas" width = "578" height = "200">
</Canvas>
</Body>
</Html>
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
