如何用canvas画布画旋转的五角星

<!DOCTYPE html>

<html>
<head>
<title>旋转五角星</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//设置边框样式以及填充颜色
context.lineWidth = 1;
context.fillStyle = "red";
context.strokeStyle = "red";
/* @length: 边长，逐渐变大
* @offset: 偏移位置，逐渐变大
* @offsetX: 横轴额外偏移，根据角度计算
* @offsetY: 竖轴额外偏移，根据角度计算
* @degree: 旋转角度，每次变化18度
*/
var length = 2,
offset = 8,
degree = 0;
var halfWidth = canvas.width / 2,
halfHeight = canvas.height / 2;
for (var num = 0; num < 60; num++) {
length *= 1.05;
offset *= 1.06;
offsetX = offset * Math.cos(degree / 180 * Math.PI);
offsetY = offset * Math.sin(degree / 180 * Math.PI)
degree -= 18;
context.beginPath();
//设置是个顶点的坐标，根据顶点制定路径
for (var i = 0; i < 5; i++) {
context.lineTo(Math.cos((degree + i* 72) / 180 * Math.PI) * length + offsetX + halfWidth,
-Math.sin((degree + i * 72) / 180 * Math.PI) * length + offsetY + halfHeight);
context.lineTo(Math.cos((degree + 36 + i * 72) / 180 * Math.PI) * length * 0.4 + offsetX + halfWidth,
-Math.sin((degree + 36 + i * 72) / 180 * Math.PI) * length * 0.4 + offsetY + halfHeight);
}
context.closePath();
context.fill();
context.stroke();
}
</script>
</body>
</html>

转自blog.csdn.net/sysuzjz