Development tools: IntelliJ Idea
Implementation effect: The following
Idea: The pentagram is actually the Pentagon of each vertex and the non-adjacent vertex.
Therefore, the coordinates of each vertex can be calculated according to the length of the Pentagon and the inner angle of the Pentagon.
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 <Script>7 8 functionDrawonestar (ctx,i)9 {Ten //I is the side length of Pentagon One Ctx.beginpath (); A Ctx.moveto (0, I*Math.sin (Math.PI/5));//Point B - Ctx.lineto (i*2*Math.Cos (Math.PI/5), I*math.sin (Math.PI/5));// be - Ctx.lineto (i*Math.Cos (Math.PI/5*2), (I*math.sin (Math.PI/5*2))+I*Math.sin (Math.PI/5));//EC the Ctx.lineto (i*Math.Cos (Math.PI/5), 0);//CA - Ctx.lineto (i+I*Math.Cos (Math.PI/5*2), (I*math.sin (Math.PI/5*2))+I*Math.sin (Math.PI/5));//AD - Ctx.lineto (0, I*Math.sin (Math.PI/5));//DB - Ctx.closepath (); + Ctx.fillstyle="Red"; - Ctx.fill (); + } A functionDrawstar () at { - varCanvas=document.getElementById ("Canvas"); - varCTX=Canvas.getcontext ("2d"); - Ctx.shadowblur= -; - Ctx.shadowcolor="Red"; - Ctx.translate ( -, -); in Ctx.rotate (-Math.PI/8); - Drawonestar (CTX, -); to for(varI=0; I< -; I++) + { - Ctx.translate ( -,- -); the Ctx.rotate (-Math.PI/8); * Ctx.scale (0.95,0.95); $ Panax Notoginseng Drawonestar (CTX, -); - } the + } A the </Script> + </Head> - <Bodymarginwidth= "0px"marginheight= "0px"onload= "Drawstar ()"> $ <CanvasID= "Canvas"width= "800px"Height= "800px"style= "Background-color:yellow"></Canvas> $ </Body> - </HTML>
View Code
HTML5 study-Draw a pentagram