Home > Developer > Web Develop
Just change the parameters to draw the polygon you want, the code is simple! Have to marvel at the power of canvas!
Code to serve.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "gb2312"><title>Drawing</title></Head><Body> <CanvasID= "MyCanvas"width= ' $ 'Height= ' $ '>Canvas Draw Line Tips</Canvas><Script> varMyCanvas=document.getElementById ("MyCanvas"); varContext=Mycanvas.getcontext ("2d"); functionDrawPath (x, y, N, r) {varI,ang; Ang=Math.PI*2/N//Angle of rotationContext.save ();//Save StateContext.fillstyle='Rgba (255,0,0,.3)';//filled red, translucentContext.strokestyle='HSL (120,50%,50%)';//Fill GreenContext.linewidth= 1;//Set line widthcontext.translate (x, y);//The origin is moved to X, Y, which is the center of the polygon to be drawnContext.moveto (0, -R);//Draw points at center R distanceContext.beginpath (); for(i= 0; I<N; I++) {context.rotate (ANG)//RotateContext.lineto (0, -R);//according to center R distance connection} context.closepath (); Context.stroke (); Context.fill (); Context.restore ();//return to original state} drawpath ( -, -, 3, +)//draw a three-edged shape with a radius of 40 at 100,100DrawPath ( $, -, 4, +)//draw a four-corner shape at 200,100 with a radius of 40DrawPath ( -, -, 5, +)//draw a Pentagon with a radius of 40 at 300,100DrawPath ( -, $, 6, +)//draw a hexagon with a radius of 40 at 100,200DrawPath ( $, $, 7, +)//draw a seven-edged shape at 100,200 with a radius of 40DrawPath ( -, $, 7, +)//draw an eight-edged shape with a radius of 40 at 300,200</Script></Body></HTML>
An example of a force-HTML5 drawing polygon
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
