Home > Developer > Web Develop
A few days ago, I made a one-fourth circle, put it in the phone test. The effect is not very good. So today, by looking at the data, I found canvas. I studied the day and found that I could use canvas to draw a circle. The code is as follows:
1 <!DOCTYPE HTML>2 <HTMLLang= "en"> 3 <Head> 4 <MetaCharSet= "UTF-8"> 5 <title></title>6 7 </Head>8 <Body>9 <CanvasID= "Canvas"width= "Max"Height= "Max"></Canvas>Ten <Scripttype= "Text/javascript"> One varCanvas=document.getElementById ("Canvas"); A functionDrawsector (canvas_tag,start_angle,angle,radius,fill,anticlockwise) { - varCenterPoint={x: the, y: the}; - Start_angle=Start_angle|| 0; the if(canvas_tag.getcontext) { - //Start Drawing Paths - CTX=Canvas_tag.getcontext ("2d"); - Ctx.beginpath (); + //Draw an arc - Ctx.arc (centerpoint.x,centerpoint.y,radius,start_angle,angle,anticlockwise); + //Draw the end radius A Ctx.lineto (CENTERPOINT.X,CENTERPOINT.Y); at Ctx.fillstyle="#FF0000"; - //If you need to fill the fill, you don't need to even - if(fill) { - Ctx.fill (); - }Else{ - Ctx.closepath (); in Ctx.stroke (); - } to } Else { + Alert ('You need to use Firefox and Apple browser to view the latest version!'); - } the } * //draw a starting angle of 180 degrees, an end angle of 270 degrees, a clockwise fill sector in the drawing direction $ Drawsector (Canvas,math.pi*1/2,math.pi,50,true,false); Panax Notoginseng </Script> - </Body> the </HTML>
Effect:
Description
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
