我目前正在使用JavaScript为画布设计一个绘制标准五角星的解决方案。我已经有了一部分进展，但还不能完全理解。如果有任何提示或指针，我将不胜感激。
5个回答
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();
希望这有所帮助...
- Nycholas Weissberg
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();
}
}
使用上述方法来绘制一个五角星：
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);
- Phil H
2
1很好的答案。请在
drawObj中将penta[objIdx]更改为obj[objIdx]。 - seg.fault1有没有任何资源可以查看这些三角函数，比如哪些三角函数可以绘制什么。 - defau1t
2
海龟几何学让问题变得简单：
五角星：
重复5次：
前进100， 右转144， 前进100， 左转72，
- pbierre
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);
- Fab
1
抱歉，我在粘贴脚本时遇到了一些问题，最后两行掉出了脚本框。无论如何，这些是参数：makeStar（画布，星形（布尔值），x偏移量，y偏移量，＃点，外半径，内半径） - Fab
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.
NB：这是许多方法之一，我相信其他人有另一种做法。此外，使用递减循环而不是递增循环的原因是性能。i != 0比i < 10更有效，i--比i++更有效。但对于我的代码，性能非常重要，对于你的代码可能不那么关键。
- ChrisIPowell
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
4/5 pi，也就是说它们围绕圆会重叠两次，你需要在这五个点之间画出五条线段。 - John Dvorak