Home > Developer > Web Develop
Principle: (1) According to the vertex of the pentagram, the outer vertex 5, the inner vertex 5, into the internal and external circle
(2) The position of each vertex can be represented by trigonometric functions
(3) Drawing using Canvas's LineTo () interface
On the code:
1<! DOCTYPE html>23 45<meta charset= "UTF-8" >6<title>captain america</title>7<style type= "Text/css" >8 #canvas {9 Display:block;Ten margin:50px Auto; One } A</style> - - the<body> -<canvas id= "Canvas" ></canvas> -<script> -Window.onload =function() { + varCanvas = document.getElementById ("Canvas"); -Canvas.width = 800; +Canvas.height = 600; A at varContext = Canvas.getcontext ("2d"); - //four rounds -DrawArc (context, 0, Math.PI * 2,false, "#dd5870"); -DrawArc (context, 0, Math.PI * 2,false, "#e0dedf"); -DrawArc (context, 0, Math.PI * 2,false, "#dd5870"); -DrawArc (context, 0, Math.PI * 2,false, "#2773d3"); inDrawstar (context, 0, "#dedce1");//Pentagram - } to + functionDrawstar (CTX, R, R, X, Y, changedeg, fillcolor) { - //draw the path of the star, Changedeg: The angle of the pentagram rotation theCtx.beginpath ();//Start Path * for(vari = 0; I < 5; i++) { $Ctx.lineto (Math.Cos (+ i * 72-changedeg)/math.pi) * R + x,-math.sin ((+ + i * 72-changedeg)/MATH.P I) * R +y);Panax NotoginsengCtx.lineto (Math.Cos (si + i * 72-changedeg)/Math.PI) * r + x,-math.sin ((si + i * 72-changedeg)/MATH.P I) * R +y); - } theCtx.closepath ()//End Path +Ctx.fillstyle =FillColor; A Ctx.fill (); the } + - functionDrawArc (CTX, x, Y, R, Stratangel, Endangel, Flag, FillColor) { $ Ctx.beginpath (); $ Ctx.arc (x, Y, R, Stratangel, Endangel, flag); -Ctx.fillstyle =FillColor; - Ctx.fill (); the Ctx.closepath (); - }Wuyi</script> the</body> -Results:
HTML5 canvas painting Pentagram (Captain America)
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
