使用canvas制作一个万花筒旋转特效

创建一个万花筒旋转特效需要利用HTML的<canvas>元素以及JavaScript。以下是一个基本的示例，展示如何创建一个万花筒旋转特效：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>万花筒旋转特效</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="kaleidoscope" width="800" height="600"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js文件)：

const canvas = document.getElementById('kaleidoscope');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 250;
const numSlices = 12;
const sliceAngle = Math.PI * 2 / numSlices;
let rotation = 0;

function drawKaleidoscope() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(centerX, centerY);
    ctx.rotate(rotation);

    for (let i = 0; i < numSlices; i++) {
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(radius, 0);
        ctx.rotate(sliceAngle);
        ctx.lineTo(0, 0);
        ctx.closePath();

        // 使用不同的颜色或渐变填充每个切片
        const hue = i / numSlices * 360;
        ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
        ctx.fill();
    }

    ctx.restore();
    rotation += 0.01; // 控制旋转速度
}

// 使用requestAnimationFrame来循环绘制
function animate() {
    drawKaleidoscope();
    requestAnimationFrame(animate);
}

animate(); // 开始动画