随笔- 62 文章- 0 评论- 1 阅读- 19080

背景旋转

以下是一个简单的示例，说明如何实现类似的效果：

创建一个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);