算法如下：
上面的圖是正三角形：
說下算法，關於上面那些x，y是怎麼算出來的。
這裏大圓的5個頂點，每個頂點佔用的角度爲360/5 = 72度，左邊那個18度是通過90 - 72 = 18度。
大圓半徑爲R，所以
x爲cos(18度) * R
y爲-sin(18度) * R
這個負是因爲座標y，是因爲向下爲正。
其他角度通過加72度就可以了！
下面來看下那個54度是怎麼算的！
72 * 2 - 90 = 54度，同樣半徑爲r
x爲cos(54度) * r
y爲-sin(54度) * r
其他角度通過加72度就可以了！
如果要旋轉角度，只要畫點時，每個點加一個對應的角度即可！
下面是代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
當前瀏覽器不支持Canvas，請更換瀏覽器後再試
</canvas>
<script>
window.onload = function() {
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.lineWidth = 10;
drawStar(context, 150, 300, 400, 400, 0);
}
function drawStar(cxt, r, R, x, y, rot){
cxt.beginPath();
for(let i = 0; i < 5; i++){
cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,
-Math.sin((18 + i * 72- rot) / 180 * Math.PI) * R + y);
cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,
-Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);
}
cxt.closePath();
cxt.stroke();
}
</script>
</body>
</html>
程序運行截圖如下：
這裏有一個要注意的，就是cos裏面要傳弧度，下面是度和弧度轉換的格式：
1弧度=180/pai 度
1度=pai/180 弧度