使用js生成一个五角星
时间: 2024-02-20 12:01:43 浏览: 96
JS绘制五角星
好的,以下是使用 JavaScript 生成一个五角星的代码:
```javascript
// 获取 canvas 元素
const canvas = document.getElementById('myCanvas');
// 获取 2D 上下文
const ctx = canvas.getContext('2d');
// 定义五角星的顶点坐标
const starPoints = [
[0, -50],
[14, -20],
[47, -15],
[23, 7],
[29, 40],
[0, 25],
[-29, 40],
[-23, 7],
[-47, -15],
[-14, -20],
];
// 定义五角星的样式
ctx.fillStyle = 'gold';
ctx.strokeStyle = 'gold';
ctx.lineWidth = 3;
// 开始绘制五角星
ctx.beginPath();
ctx.moveTo(starPoints[0][0], starPoints[0][1]);
for (let i = 1; i < starPoints.length; i++) {
ctx.lineTo(starPoints[i][0], starPoints[i][1]);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
```
这段代码会在指定的 canvas 元素中生成一个金色的五角星。你可以根据需要调整五角星的大小和样式。
阅读全文