<!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