在js中使用for循环画一个正五角星,填充颜色为深黄色
时间: 2024-03-01 19:51:15 浏览: 103
下面是使用 for 循环在 canvas 中画一个填充颜色为深黄色的正五角星的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 设置填充颜色为深黄色
ctx.fillStyle = "#FFA500";
// 定义正五角星的尺寸和位置
var size = 100;
var x = 400;
var y = 300;
// 计算正五角星的五个顶点坐标
var points = [];
for (var i = 0; i < 5; i++) {
var angle = i * Math.PI * 2 / 5 - Math.PI / 2;
var px = x + size * Math.cos(angle);
var py = y + size * Math.sin(angle);
points.push({x: px, y: py});
}
// 绘制正五角星
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < 5; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
```
在该示例中,我们首先使用 ctx.fillStyle 属性设置填充颜色为深黄色。然后定义正五角星的尺寸和位置,使用 for 循环计算正五角星的五个顶点坐标,并将它们保存在数组中。最后,使用 ctx.beginPath() 方法开始绘制路径,使用 ctx.moveTo() 方法将画笔移动到第一个顶点的位置,使用 for 循环和 ctx.lineTo() 方法连接五个顶点,形成正五角星的轮廓,最后使用 ctx.closePath() 方法闭合路径并使用 ctx.fill() 方法填充颜色。
阅读全文