用HTML 5 canvas绘制五角大楼

问题描述：

我需要在Javascript中使用html 5 canvas绘制五角大楼。这里写的不多。我试图查找它，但很多的例子不能正常工作。用HTML 5 canvas绘制五角大楼

的可能的复制[如何绘制HTML5画布上的多边形？]（https://stackoverflow.com/questions/4839993/how-to-draw上-AN-HTML5的画布-polygons）。五角形就像其他多边形一样。您可以使用javascript来计算坐标的数学运算。 –

我知道五角形就像任何其他多边形一样，我有数学问题，尤其是几何问题。 –

然后，您应该尝试在[数学StackExchange]（https://math.stackexchange.com/）中提问，因为您澄清说您没有编程问题。 –

答

五角形开始于3oclock pos使用旋转以弧度更改开始位置。即从顶部开始旋转-90deg = -Math.PI/2

function pentagon(x, y, radius, rotation){ 
    for(var i = 0; i < 5; i ++){ 
     const ang = (i/5) * Math.PI * 2 + rotation; 
     ctx.lineTo(
      Math.cos(ang) * radius + x, 
      Math.sin(ang) * radius + y 
     ); 
    } 
    ctx.closePath(); 
) 

ctx.beginPath(); 
pentagon(100,100,50,-Math.PI/2); 
ctx.fill(); 
ctx.stroke();

用HTML 5 canvas绘制五角大楼

相关推荐