1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title>Making arcs and circles</title>6 </Head>7 <Body>8 <CanvasID= "Canvas"style= "border:1px solid #aaa; display:block;margin:50px auto;">9 the current browser does not support canvas, please change your browserTen </Canvas> One <Script> A window.onload=function(){ - varCanvas=document.getElementById ("Canvas"); - the Canvas.width=1024x768; - Canvas.height=768; - - varContext=Canvas.getcontext ("2d"); + - Context.linewidth=5; + Context.strokestyle="#005588"; A Context.arc ( -, -, $,0,1.5*Math.PI); at Context.stroke (); - } - </Script> - <!-- - Description: - 1.context.arc (Centerx,centery,radius,startingangle,endingangle,anticlockwise=false);//(Center x coordinate, center y coordinate, radius, Start Radian value, end Radian value, arc draw direction) The arc draws direction by default to false for clockwise drawing direction. in - - to + </Body> - </HTML>
The drawing effect is as follows:
Learn canvas drawing and animation basics making arcs and circles (v)
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
