使用js带上for循环绘制一个五角星
时间: 2024-02-28 10:02:56 浏览: 29
好的,以下是使用 JavaScript 绘制五角星的代码:
```javascript
// 获取 canvas 元素
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小
canvas.width = 500;
canvas.height = 500;
// 设置五角星的大小和位置
const x = 250;
const y = 250;
const r = 100;
// 绘制五角星
ctx.beginPath();
for (let i = 0; i < 5; i++) {
const angle = (2 * Math.PI / 5) * i - Math.PI / 2;
const px = x + r * Math.cos(angle);
const py = y + r * Math.sin(angle);
ctx.lineTo(px, py);
}
ctx.closePath();
ctx.stroke();
```
解释一下代码:
首先,我们获取到 canvas 元素,然后设置它的大小为 500 x 500。接着,我们设置了五角星的大小和位置,其中 x 和 y 表示五角星的中心点,r 表示五角星的半径。
接下来,我们使用 `ctx.beginPath()` 开始绘制路径,然后使用一个 for 循环来计算五角星的五个顶点的位置,并使用 `ctx.lineTo()` 将这些顶点连接起来。最后,我们使用 `ctx.closePath()` 将路径闭合,并使用 `ctx.stroke()` 绘制出五角星的线条。
这样就可以在 canvas 上绘制出一个五角星了。