我目前正在研究一种使用 JavaScript 在画布上绘制标准 5 点星的解决方案。我在那里的一部分，但无法完全弄清楚。我会很感激任何人可能有的任何提示或指示。
问问题
24835 次
5 回答
4
n 点星，点均匀分布在一个圆圈周围。假设第一个点在 0,r（顶部），圆以 0,0 为中心，我们可以从一系列旋转 2π/(2n+1) 的三角形构造它：
定义一个旋转函数：
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);
于 2013-06-25T08:10:42.597 回答
4
我对 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();
希望能帮助到你...
于 2013-06-24T15:34:29.360 回答
2
这是 Turtle Geometry 使事情变得简单的问题：
5分星：
重复5次：
前轮 100，右 144，前轮 100，左 72，
于 2018-06-01T15:18:22.557 回答
1
您需要绘制内部位，一个完整的圆是 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 < 10 更有效，并且 i-- 比 i++ 更有效。但是性能对我的代码很重要，对你的代码可能并不那么重要。
于 2013-01-29T10:04:27.000 回答
1
我自己也在寻找这样的算法，想知道我是否可以自己发明一个。结果不是太难了。所以这里有一个创建星星和多边形的小函数，带有设置点数、外半径和内半径的选项（后者只适用于星星）。
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);
于 2013-05-05T20:43:04.300 回答