canvas绘制正交多边形
时间: 2023-10-22 21:07:27 浏览: 136
要绘制正交多边形,可以通过以下步骤实现:
1. 定义多边形的边数和边长;
2. 定义多边形的中心点坐标;
3. 计算多边形各个顶点的坐标;
4. 使用canvas绘制多边形。
下面是一个示例代码:
```javascript
// 定义多边形的边数和边长
const sides = 6; // 六边形
const length = 50; // 边长为50
// 定义多边形的中心点坐标
const centerX = 100;
const centerY = 100;
// 计算多边形各个顶点的坐标
const angle = Math.PI * 2 / sides; // 计算每个角的弧度
const points = []; // 存储顶点坐标的数组
for (let i = 0; i < sides; i++) {
const x = centerX + Math.cos(angle * i) * length;
const y = centerY + Math.sin(angle * i) * length;
points.push({x, y});
}
// 使用canvas绘制多边形
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.closePath();
ctx.stroke();
```
这段代码可以绘制一个中心点坐标为(100,100),边长为50的正六边形。你可以根据需要修改边数、边长和中心点坐标来绘制不同形状的正交多边形。