canvas绘制正多边形_CSS3教程,CSS3动画教程,HTML5教程,HTML5+教程,HTML5 PLUS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

canvas是html5推出的强大的绘图标签，必须结合js绘制。但是它没有专门的绘制正多边形的方法，这里，我爱模板网从网上找了个封装好的，可以画任意正多边形的工具，希望对大家有帮助。
函数如下：

function polygon(c,n,x,y,r,angle,counterclockwise){  
    var angle = angle || 0;  
    var counterclockwise = counterclockwise || false;  
    c.moveTo(x + r*Math.sin(angle), y - r*Math.cos(angle));     //确立第一个点
    var delta = 2*Math.PI/n;        //相邻两个顶点之间的夹角
    for(var i=0;i<n;i++){            //其他顶点
        angle += counterclockwise ? - delta : delta;     //角度调整
        c.lineTo(x + r*Math.sin(angle), y - r*Math.cos(angle));  
    }  
    c.closePath();      //闭合路径
}

   本函数以(x,y)为中心，半径为r的正多边形，参数详解：
       *@param c 是canvas的上下文对象
       *@param n 是需要画的边数，如4，即四边形
       *@param angle 是第一个点(以最上面的顶点为准)偏离中心点(x,y)的弧度。angle为0时第一个点和中心的x想等，如第一个正方形
       *@param counterclockwise 是angle偏离是顺时针还是逆时针

   运行下面的代码，可以查看最终效果(代码中也有注释)：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘制正多边形 - 我爱模板网 www.5imoban.net</title> </head> <body> <canvas id="canvas" width="600" height="500" style="border:1px solid #A6A7A6;"></canvas> <script> function polygon(c,n,x,y,r,angle,counterclockwise){ var angle = angle || 0; var counterclockwise = counterclockwise || false; c.moveTo(x + r*Math.sin(angle), y - r*Math.cos(angle)); //确立第一个点 var delta = 2*Math.PI/n; //相邻两个顶点之间的夹角 for(var i=0;i<n;i++){ //其他顶点 angle += counterclockwise ? - delta : delta; //角度调整 c.lineTo(x + r*Math.sin(angle), y - r*Math.cos(angle)); } c.closePath(); //闭合路径 } var canvas = document.getElementById('canvas'); var c = canvas.getContext("2d"); c.beginPath(); polygon(c,4,60,200,40); //正四边形 polygon(c,4,180,200,40,Math.PI/4); //正四边形 polygon(c,6,300,200,40,Math.PI/6); //正六边形 polygon(c,12,460,200,40); //正12边形 c.fillStyle = '#f00'; c.fill(); </script> </body> </html>
提示：您可以先修改部分代码再运行

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

canvas绘制正多边形

猜你喜欢