Javascript 绘制内接在圆中的正多边形_Javascript_Raphael

Javascript 绘制内接在圆中的正多边形

javascript

Javascript 绘制内接在圆中的正多边形,javascript,raphael,Javascript,Raphael,我试图画出内接在给定中心（x，y）和半径（r）的圆上的正多边形（正方形和等边三角形）。我用的是raphael.js 下面是我绘制内接正方形的函数： function draw_square(x,y,radius){ var side= radius*(Math.sqrt(2)); var x = x - (side/2); var y = y - (side/2); var square= paper.rect(x, y, side, side); } 谁能解释

我试图画出内接在给定中心（x，y）和半径（r）的圆上的正多边形（正方形和等边三角形）。我用的是raphael.js

下面是我绘制内接正方形的函数：

function draw_square(x,y,radius){
    var side= radius*(Math.sqrt(2));
    var x = x - (side/2);
    var y = y - (side/2);
    var square= paper.rect(x, y, side, side);
}

谁能解释一下我如何画一个等边三角形（内接在给定的圆上）

在trigo和raphael paper.path（）的帮助下。

我第一次使用raphael，因此您必须从以下内容中提取所需内容：

<html>
<body>
    <div id="paper"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
    <script>
        var paper = new Raphael(document.getElementById('paper'), 256, 256);
        var x = 128, y = 128, r = 64, n = 9;
        paper.circle(x, y, r);
        var xx, yy, i, a, pathString = "";
        for (i = 0; i <= n; ++i) {
            a = ((4 * Math.PI * i) + (Math.PI * n) + (2 * Math.PI)) / (2 * n);
            xx = x + r * Math.cos(a);
            yy = y + r * Math.sin(a);
            pathString += (i == 0 ? "M " : " L ") + xx + " " + yy;
        }
        pathString += " z";
        paper.path(pathString);
    </script>
</body>
</html>


var paper=new Raphael（document.getElementById（'paper'），256，256）；
变量x=128，y=128，r=64，n=9；
纸。圆（x，y，r）；
变量xx，yy，i，a，pathString=“”；
对于（i=0；i这正是我想做的。有可能，多边形可以旋转吗？是的！所以我在那里做了一些多余的工作，计算了两次角度。表示2*Math.PI/n*i
。你可以添加一些数字来旋转。记住，你需要添加弧度，而不是度，其中2*PI弧度==360度如果你需要转换的帮助，请告诉我！我可以使用shape.rotate（度，x，y）。但我不知道旋转角度和多边形的边数之间的关系。哦，你想要什么旋转？你想一直保证一个点在北方位置，比如说？还是你想通过一些变量，未知量旋转？呃，使基线水平的计算有点困难有点势不可挡，但这应该行得通！：）
<html>
<body>
    <div id="paper"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
    <script>
        var paper = new Raphael(document.getElementById('paper'), 256, 256);
        var x = 128, y = 128, r = 64, n = 9;
        paper.circle(x, y, r);
        var xx, yy, i, a, pathString = "";
        for (i = 0; i <= n; ++i) {
            a = ((4 * Math.PI * i) + (Math.PI * n) + (2 * Math.PI)) / (2 * n);
            xx = x + r * Math.cos(a);
            yy = y + r * Math.sin(a);
            pathString += (i == 0 ? "M " : " L ") + xx + " " + yy;
        }
        pathString += " z";
        paper.path(pathString);
    </script>
</body>
</html>