Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <CanvasID= "Canvas"style= "margin:0 auto;border:1px #ddd solid;">the current browser does don't support Canvas, can replace the browser a try! </Canvas> <Script>window.onload= function(){ varCanvas=document.getElementById ('Canvas'); Canvas.width= -; Canvas.height= -; if(Canvas.getcontext ('2d')){ varContext=Canvas.getcontext ('2d'); //Context.arc (400,400,300,0.5*math.pi,1.5*math.pi,true); //Context.moveto (400,100); //Context.arcto (1200,400,400,700, (400-100) *dis (400,100,1200,400)/(1200-400)) //Context.stroke ();Fillmoon (Context,2, -, -, -,0) }Else{alert ('the current browser does not support canvas, please change the viewer and try again! '); } } functiondis (x1,y1,x2,y2) {returnmath.sqrt ((x1-x2)*(x1-x2)+(Y1-y2)*(Y1-y2)) } //Optimized //x, y position r radius functionFillmoon (Cxt,d,x,y,r,rot,fillcolor) {cxt.save (); Cxt.translate (x, y); Cxt.rotate (Rot*Math.PI/);Cxt.scale (R,R); Pathmoon (CXT,D); Cxt.fillstyle=FillColor|| "#fb5"; Cxt.fill (); Cxt.restore (); } functionPathmoon (cxt,d) {Cxt.beginpath (); Cxt.arc (0,0,1,0.5*Math.PI,1.5*Math.PI,true); MoveTo (0,-1); Cxt.arcto (d,0,0,1, Dis (0,-1, D,0)/d); //or use a Bezier two-time curve //Cxt.quadraticcurveto (1.2,0,0,1)Cxt.closepath (); } functiondis (x1,y1,x2,y2) {returnmath.sqrt ((x1-x2)*(x1-x2)+(Y1-y2)*(Y1-y2)) } </Script></Body></HTML>
Canvas-star6-drawmoon.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
