用HTML 5 canvas繪製五角大樓

Question

我需要在Javascript中使用html 5 canvas繪製五角大樓。這裏寫的不多。我試圖查找它，但很多的例子不能正常工作。

Answer 1

五角形開始於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();