以下是一个简单的示例，说明如何实现类似的效果：
- 创建一个HTML文件，并添加一个
<canvas>元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abstract Shape</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>
- 在同一个目录下创建一个名为
script.js的JavaScript文件，并编写以下代码：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 定义一些点的位置
const points = [
{ x: 100, y: 100 },
{ x: 150, y: 75 },
{ x: 200, y: 100 },
// 添加更多点...
];
// 绘制连接这些点的线段
function drawShape() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (let i = 0; i < points.length; i++) {
const p = points[i];
if (i === 0) {
ctx.moveTo(p.x, p.y);
} else {
ctx.lineTo(p.x, p.y);
}
}
ctx.closePath();
ctx.stroke();
}
// 更新点的位置以模拟旋转效果
function updatePoints() {
for (let i = 0; i < points.length; i++) {
const angle = (i / points.length) * Math.PI;
const radius = Math.random() * 30 + 60;
const newX = Math.cos(angle) * radius + 200;
const newY = Math.sin(angle) * radius + 200;
points[i].x += (newX - points[i].x) * 0.1;
points[i].y += (newY - points[i].y) * 0.1;
}
}
setInterval(() => {
updatePoints();
drawShape();
}, 30);
这段代码首先定义了一些点的位置，然后绘制了连接这些点的线段。通过定期更新点的位置并重新绘制形状，我们可以模拟出旋转的效果。
标签：canvas,const,背景,ctx,旋转,points,radius,Math From： https://www.cnblogs.com/luo9tian/p/18096385