Canvas 画正n角星

最新推荐文章于 2024-08-12 17:44:32 发布

Jacob_Yu

最新推荐文章于 2024-08-12 17:44:32 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/Jacob_Yu/article/details/79090218

版权

canvas 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Html5

1 篇文章 0 订阅

订阅专栏

Canvas 画正n角星

看到canvas画图是不由得想起之前的gostscript，两者很类似，借鉴crystalhuhu 的五角星画法

先讲如何画一个正规的五角星

在五角星的内外画两个圆，五角星有五个角，360/5=72度

所以得出这两个角的度数

然后算出这两个点坐标

角度转弧度

角度/180*Math.PI

所以外顶点坐标x: Math.cos( (18+72*i)/180*Math.PI) * R

y: Math.sin((18+72*i)/180*Math.PI) * R

所以内顶点坐标 x: Math.cos( (54+72*i)/180*Math.PI) * r

y: Math.sin((54+72*i)/180*Math.PI) * r

画完五角星后我就想何不画个n角星，说画就画：

推倒下N角星的顶点坐标：

三角星外圆内圆中对应的顶点坐标相差120度外圆起始角30° 内圆起始角60° 30+60 = 360/3=120

四角星外圆内圆中对应的顶点坐标相差90度外圆起始角22.5° 内圆起始角67.5° 30+60 = 360/4=90

五角星外圆内圆中对应的顶点坐标相差72度外圆起始角18° 内圆起始角54° 18+54= 360/5 =72

六角星外圆内圆中对应的顶点坐标相差60度外圆起始角15° 内圆起始角45° 15+45= 360/6 =60

所以外定点坐标x: Math.cos(((360/n)*(1/4)+(360/n)*1)/180*Math.PI)*R

y: Math.sin(((360/n)*(1/4)+(360/n)*1)/180*Math.PI)*R

所以内定点坐标x: Math.cos(((360/n)*(3/4)+(360/n)*1)/180*Math.PI)*R

y: Math.sin(((360/n)*(3/4)+(360/n)*1)/180*Math.PI)*R

简化后就是：

外定点坐标x: Math.cos(((360/n)*(1/4)+(360/n)*1)/180*Math.PI)*R

y: Math.sin(((360/n)*(1/4)+(360/n)*1)/180*Math.PI)*R

内定点坐标x: Math.cos(((360/n)*(3/4)+(360/n)*1)/180*Math.PI)*R

y: Math.sin(((360/n)*(3/4)+(360/n)*1)/180*Math.PI)*R

那么整段代码如下（当n>=3的时候正确）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <canvas id="mycanvas"></canvas>
    <script>
        var canvas = document.getElementById('mycanvas');
        canvas.width=800;//设置画布的宽度  
        canvas.height=800;//设置画布的高度
        var cxt = canvas.getContext('2d');
        createStar(cxt,4,100,300,400,400,10);

        function createStar(context,n,r,R,x,y,lwid) {
            /*
            content 画图对象
            n 星型顶点数
            r 内圆半径
            R 外圆半径
            x 星型中心点x坐标
            y 星型中心店y坐标
            lwid lineWidth
            */
            cxt.save();
            cxt.lineWidth=lwid;
            cxt.beginPath();
            cxt.translate(x,y);
            for(var i=0;i<n;i++){
                cxt.lineTo(Math.cos(((1/4 + i)*2*Math.PI/n))*R,-Math.sin(((1/4 + i)*2*Math.PI/n))*R);
                cxt.lineTo(Math.cos(((3/4 + i)*2*Math.PI/n))*r,-Math.sin(((3/4 + i)*2*Math.PI/n))*r);
            } 
        cxt.closePath(); 
        cxt.stroke();
        cxt.restore();
        }       
    </script>
</body>
</html>