ペンタゴンをHTML 5のキャンバスで描く

Question

私はペンタゴンをHTML5のキャンバスでJavascriptで描く必要があります。それ以外はあまり書きません。私はそれを探してみましたが、多くの例が正しく動作しません。

Answer 1

ペンタゴンは、開始位置をラジアン単位で変更するために、3クロックの位置で回転を開始します。すなわち、トップ回転で起動するには、の-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();