Question

我目前正致力于使用JavaScript在画布上绘制标准5点星的解决方案。我在那里的一部分，但无法完全理解。我很感激任何人可能有的提示或指示。

Answer 1

我对Chris发布的代码进行了一些更改，因此它对我有用：

var alpha = (2 * Math.PI) / 10; 
var radius = 12;
var starXY = [100,100]

canvasCtx.beginPath();

for(var i = 11; i != 0; i--)
{
    var r = radius*(i % 2 + 1)/2;
    var omega = alpha * i;
    canvasCtx.lineTo((r * Math.sin(omega)) + starXY[0], (r * Math.cos(omega)) + starXY[1]);
}
canvasCtx.closePath();
canvasCtx.fillStyle = "#000";
canvasCtx.fill();

希望它有所帮助...

Answer 2

n点星，点围绕圆均匀分布。假设第一个点位于0，r（顶部），圆圈以0,0为中心，我们可以从旋转2π/（2n + 1）的一系列三角形构造它：

5 point star

定义旋转功能：

function rotate2D(vecArr, byRads) {
    var mat = [ [Math.cos(byRads), -Math.sin(byRads)], 
                [Math.sin(byRads), Math.cos(byRads)] ];
    var result = [];
    for(var i=0; i < vecArr.length; ++i) {
        result[i] = [ mat[0][0]*vecArr[i][0] + mat[0][1]*vecArr[i][1],
                      mat[1][0]*vecArr[i][0] + mat[1][1]*vecArr[i][1] ];
    }
    return result;
}

通过旋转n个三角形构造一个星形：

function generateStarTriangles(numPoints, r) {
    var triangleBase = r * Math.tan(Math.PI/numPoints);
    var triangle = [ [0,r], [triangleBase/2,0], [-triangleBase/2,0], [0,r] ];
    var result = [];
    for(var i = 0; i < numPoints; ++i) {
       result[i] = rotate2D(triangle, i*(2*Math.PI/numPoints));
    }
    return result;
}

定义一个函数来绘制任何给定的多边形数组：

function drawObj(ctx, obj, offset, flipVert) {
   var sign=flipVert ? -1 : 1;
   for(var objIdx=0; objIdx < obj.length; ++objIdx) {
      var elem = obj[objIdx];
      ctx.moveTo(elem[0][0] + offset[0], sign*elem[0][1] + offset[1]);
      ctx.beginPath();
      for(var vert=1; vert < elem.length; ++vert) {
        ctx.lineTo(elem[vert][0] + offset[0], sign*elem[vert][1] + offset[1]);
      }
      ctx.fill();
   }
}

使用以上方法绘制一个5点星：

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var offset = [canvas.width/2, canvas.height/2];
ctx.fillStyle="#000000";
var penta = generateStarTriangles(5, 200);
drawObj(ctx, penta, offset, true);

在此处查看 http://jsbin.com/oyonos/2/

Answer 3

您需要绘制内部位，完整的圆是2 * PI弧度。在下面的示例中，r是包围圆的半径。以下代码来自开源项目（http://github.com/CIPowell/PhyloCanvas）

var alpha = (2 * Math.PI) / 10; 
// works out the angle between each vertex (5 external + 5 internal = 10)
var r_point = r * 1.75; // r_point is the radius to the external point

for(var i = 11; i != 0; i--) // or i could = 10 and you could use closePath at the end
{
var ra = i % 2 == 1 ? rb: r;

var omega = alpha * i; //omega is the angle of the current point
    //cx and cy are the center point of the star.
node.canvas.lineTo(cx + (ra * Math.sin(omega)), cy + (ra * Math.cos(omega)));

}

//Store or fill.

注意：这是皮肤猫咪的许多方法之一，我敢肯定别人有另一种方法可以做到这一点。此外，递减循环而不是增量循环的原因是性能。 i！= 0比i <0更有效。 10和i--比i ++更有效率。但是对于我的代码，性能很重要，对你的代码来说可能并不那么重要。

Answer 4

我自己一直在寻找这样的算法，并想知道我是否可以自己创造一个算法。原来并不太难。所以这里有一个小函数来创建星星和多边形，可以选择设置点数，外半径和内半径（后者仅适用于星星）。

function makeStar(c, s, x, y , p, o, i) {
    var ct = c.getContext('2d');
    var points =  p || 5;
    var outer_radius = o || 100;
    var inner_radius = i || 40;
    var start_x = x || 100;
    var start_y = y || 100;
    var new_outer_RAD, half_new_outer_RAD;
    var RAD_distance = ( 2 * Math.PI / points);  
    var RAD_half_PI = Math.PI /2; 
    var i;
    ct.moveTo(start_x, start_y);
    ct.beginPath();

    for (i=0; i <= points; i++) {
        new_outer_RAD = (i + 1) * RAD_distance;     
        half_new_outer_RAD = new_outer_RAD - (RAD_distance / 2); 

        if (s) {
            ct.lineTo(start_x + Math.round(Math.cos(half_new_outer_RAD - RAD_half_PI) * inner_radius), start_y + Math.round(Math.sin(half_new_outer_RAD - RAD_half_PI) * inner_radius));
        }

        ct.lineTo(start_x + Math.round(Math.cos(new_outer_RAD - RAD_half_PI) * outer_radius), start_y + Math.round(Math.sin(new_outer_RAD - RAD_half_PI) * outer_radius));   

    }

    ct.stroke();
}

var canvas = document.getElementById('canvas');

makeStar(canvas);
makeStar(canvas, true, 120,200, 7, 110, 40);

Answer 5

这是Turtle Geometry使事情变得简单的问题：

五分星：

重复5次：

前100，权利144，前100，离开了72，

绘制5点星的算法

5 个答案: