canvas 画六边形边框_H5之家 - 中国HTML5教程资源分享第一站

正文

<!DOCTYPE html> <html lang=> <head> <meta charset=> <title>Document</title> </head> <body> <canvas id=width=height=>测试</canvas> <script> ); ); function drawPath(x, y, n, r) { var i, ang; ang = Math.PI * 2 / n //旋转的角度 context.save(); //保存状态 context.fillStyle = ; //填充红色，半透明 context.strokeStyle = ; //填充绿色 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, 5, 40) //在100,100处画一个半径为40的五边形 drawPath(200, 100, 3, 40) //在200,100处画一个半径为40的三角形 drawPath(300, 100, 6, 40) //在300,100处画一个半径为40的六边形 drawPath(100, 200, 15, 40) //在100,200处画一个半径为40的十五边形 drawPath(200, 200, 4, 40) //在100,200处画一个半径为40的四边形 </script> </body> </html>