首页 > 建站教程 > CSS3+HTML5 >  canvas绘制正多边形正文

canvas绘制正多边形

    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偏离是顺时针还是逆时针

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


提示：您可以先修改部分代码再运行

TAGS: canvas绘制正多边形