标签：style blog color io os ar for div sp
只需改变参数就能画出你想要的多边形，代码简单！不得不惊叹canvas的强大！
代码奉上
<!doctype html> <html> <head> <meta charset="gb2312"> <title>画图</title> </head> <body> <canvas id = "myCanvas" width = ‘500‘ height = ‘500‘>Canvas画线技巧</canvas> <script> var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); function drawPath(x, y, n, r) { var i,ang; ang = Math.PI*2/n //旋转的角度 context.save();//保存状态 context.fillStyle =‘rgba(255,0,0,.3)‘;//填充红色，半透明 context.strokeStyle =‘hsl(120,50%,50%)‘;//填充绿色 context.lineWidth = 1;//设置线宽 context.translate(x, y);//原点移到x,y处，即要画的多边形中心 context.moveTo(0, -r);//据中心r距离处画点 context.beginPath(); for(i = 0;i < n; i ++) { context.rotate(ang)//旋转 context.lineTo(0, -r);//据中心r距离处连线 } context.closePath(); context.stroke(); context.fill(); context.restore();//返回原始状态 } drawPath(100, 100, 3, 40)//在100,100处画一个半径为40的三边形 drawPath(200, 100, 4, 40)//在200,100处画一个半径为40的四角形 drawPath(300, 100, 5, 40)//在300,100处画一个半径为40的五边形 drawPath(100, 200, 6, 40)//在100,200处画一个半径为40的六边形 drawPath(200, 200, 7, 40)//在100,200处画一个半径为40的七边形 drawPath(300, 200, 7, 40)//在300,200处画一个半径为40的八边形 </script> </body> </html>
标签：style blog color io os ar for div sp
原文地址：http://www.cnblogs.com/djdliu/p/3980865.html
