【前端技术】六一儿童节快乐，做个大转盘给小朋友抽个奖吧

子晓聊技术

发布于 2026-04-23 14:31:23

680

又到了一年一度的六一儿童节，自从家里有小朋友后，这个节日渐渐从20多年前的模糊儿时记忆中逐渐清晰。小朋友的乐趣就是那么简单，小贴纸，橡皮泥，还是气球，或者是小玩具。

这里简单用AI生成一个大转盘游戏，让小朋友简单抽一抽。如果你家有小朋友，也可以试一试。代码里修改自己准备的小礼物。

既然这里提到代码是由AI生成，不得不提到AI编程工具。说到AI编程工具，现在已经有了很多选择。之前的文章也介绍了不少，比如说 cursor、 windsurf、字节的trae，亦或者最近的灵码IDE，看腾讯的调研问卷后续应该也会推出 CodeBuddy。

这里整理对应的几款AI编程工具地址：

cursor：https://www.cursor.com/cn

windsurf： https://windsurf.com/editor

字节的trae国内版： https://www.trae.com.cn/

字节的trae国际版： https://www.trae.ai/

阿里的灵码IDE： https://lingma.aliyun.com/download?plug=lingmaIde

腾讯的CodeBuddy ： https://copilot.tencent.com/

至于哪款好用，说白了用的是claude 、ChatGPT、 deepseek、qwen等这些大模型的能力，以及AI编程工具对 agent、mcp的支持程度以及对应优化。

有条件就用cursor，至少从目前来看是最好用的。没条件用trae、灵码IDE都是好的选择。

没有存在哪款AI工具好不好用，最重要的的是会提问的人。 AI有些时候并没你想象的聪明。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>六一儿童节大转盘抽奖</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #FFD6E7;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        .header h1 {
            color: #FF4081;
            font-size: 28px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        .turntable-container {
            position: relative;
            width: 350px;
            height: 350px;
            margin: 0 auto;
        }
        #wheelCanvas {
            background-color: white;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        }
        .pointer {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #FF4081;
            color: white;
            text-align: center;
            line-height: 60px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            z-index: 10;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
        .pointer::after {
            content: '';
            position: absolute;
            left: 50%;
            top: -20px;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 30px solid #FF4081;
        }
        .decoration {
            position: absolute;
            width: 40px;
            height: 40px;
        }
        .balloon1 {
            top: 10px;
            left: 10px;
            animation: float 3s ease-in-out infinite;
        }
        .balloon2 {
            top: 10px;
            right: 10px;
            animation: float 4s ease-in-out infinite;
        }
        .balloon3 {
            bottom: 10px;
            left: 10px;
            animation: float 5s ease-in-out infinite;
        }
        .balloon4 {
            bottom: 10px;
            right: 10px;
            animation: float 3.5s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🎉 六一儿童节快乐 🎉</h1>
    </div>

    <div class="turntable-container">
        <canvas id="wheelCanvas" width="350" height="350"></canvas>
        <div class="pointer" id="spinBtn">开始</div>

        <!-- 装饰气球 -->
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0ZGREE0QiIgZD0iTTM1LjgxNSAxMC4wNTJjLS4yNDktLjYzNS0uNjc5LTEuMTU2LTEuMjQ2LTEuNTEyLS41NjYtLjM1Ny0xLjIyLS41NDMtMS44ODktLjU0My0uMTY5IDAtLjMzNy4wMTItLjUwNi4wMzUtLjY3LjA5My0xLjMwMy4zNjUtMS44MjcuNzg3LS41MjUuNDIzLS45MjYuOTc0LTEuMTYzIDEuNTk3LS4yMzYuNjIzLS4zMDQgMS4yOTUtLjE5NiAxLjk1My4xMDguNjU4LjM5IDEuMjc1LjgxNyAxLjc4Ny4xNzYuMjExLjM3NS40MDEuNTkzLjU2Ni0uMDYxLjE5My0uMTI0LjM4Ni0uMTg4LjU3OC0uNTI1IDEuNTc1LTEuMDY5IDMuMjA1LTIuMDI2IDQuNjI1LS4zNjkuNTQ3LS43OTcgMS4wNjMtMS4yOTEgMS41MzQtLjQ5NC40NzItMS4wNTMuODk3LTEuNjc3IDEuMjY3LS42MjQuMzctMS4zMTMuNjgzLTIuMDU5LjkzMy0uNzQ2LjI1LTEuNTQ3LjQzNi0yLjM5NS41NTYtLjg0OC4xMi0xLjc0MS4xNzQtMi42NzUuMTc0LS45MzQgMC0xLjgyNy0uMDU0LTIuNjc1LS4xNzQtLjg0OC0uMTItMS42NDktLjMwNi0yLjM5NS0uNTU2LS43NDYtLjI1LTEuNDM1LS41NjMtMi4wNTktLjkzMy0uNjI0LS4zNy0xLjE4My0uNzk1LTEuNjc3LTEuMjY3LS40OTQtLjQ3MS0uOTIyLS45ODctMS4yOTEtMS41MzQtLjk1Ny0xLjQyLTEuNTAxLTMuMDUtMi4wMjYtNC42MjUtLjA2NC0uMTkyLS4xMjctLjM4NS0uMTg4LS41NzguMjE4LS4xNjUuNDE3LS4zNTUuNTkzLS41NjYuNDI3LS41MTIuNzA5LTEuMTI5LjgxNy0xLjc4Ny4xMDgtLjY1OC4wNC0xLjMzLS4xOTYtMS45NTMtLjIzNy0uNjIzLS42MzgtMS4xNzQtMS4xNjMtMS41OTctLjUyNC0uNDIyLTEuMTU3LS42OTQtMS44MjctLjc4Ny0uMTY5LS4wMjMtLjMzNy0uMDM1LS41MDYtLjAzNS0uNjY5IDAtMS4zMjMuMTg2LTEuODg5LjU0My0uNTY3LjM1Ni0uOTk3Ljg3Ny0xLjI0NiAxLjUxMi0uMjQ5LjYzNS0uMzE5IDEuMzItLjIwNSAxLjk5LjExNC42Ny40MDkgMS4yOTkuODU2IDEuODIxLjQ0Ny41MjIgMS4wMzIuOTIxIDEuNjkgMS4xNTUuNjU4LjIzNCAxLjM2Ny4zIDIuMDYuMTkxLjE3LS4wMjcuMzM3LS4wNjUuNS0uMTEzLjA2MS4xOTMuMTI0LjM4Ni4xODguNTc4LjUyNSAxLjU3NSAxLjA2OSAzLjIwNSAyLjAyNiA0LjYyNS4zNjkuNTQ3Ljc5NyAxLjA2MyAxLjI5MSAxLjUzNC40OTQuNDcyIDEuMDUzLjg5NyAxLjY3NyAxLjI2Ny42MjQuMzcgMS4zMTMuNjgzIDIuMDU5LjkzMy43NDYuMjUgMS41NDcuNDM2IDIuMzk1LjU1Ni44NDguMTIgMS43NDEuMTc0IDIuNjc1LjE3NC45MzQgMCAxLjgyNy0uMDU0IDIuNjc1LS4xNzQuODQ4LS4xMiAxLjY0OS0uMzA2IDIuMzk1LS41NTYuNzQ2LS4yNSAxLjQzNS0uNTYzIDIuMDU5LS45MzMuNjI0LS4zNyAxLjE4My0uNzk1IDEuNjc3LTEuMjY3LjQ5NC0uNDcxLjkyMi0uOTg3IDEuMjkxLTEuNTM0Ljk1Ny0xLjQyIDEuNTAxLTMuMDUgMi4wMjYtNC42MjUuMDY0LS4xOTIuMTI3LS4zODUuMTg4LS41NzgtLjE2My4wNDgtLjMzLjA4Ni0uNS4xMTMtLjY5My4xMDktMS40MDIuMDQzLTIuMDYtLjE5MS0uNjU4LS4yMzQtMS4yNDMtLjYzMy0xLjY5LTEuMTU1LS40NDctLjUyMi0uNzQyLTEuMTUxLS44NTYtMS44MjEtLjExNC0uNjcuMDQ0LTEuMzU1LjI5My0xLjk5eiIvPjxwYXRoIGZpbGw9IiM2NjQ1MDAiIGQ9Ik0xOCAzNmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6bTAtMmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6bTAtMmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6bTAtMmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6Ii8+PC9zdmc+" class="decoration balloon1" alt="气球">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0ZGREM2OCIgZD0iTTM1LjgxNSAxMC4wNTJjLS4yNDktLjYzNS0uNjc5LTEuMTU2LTEuMjQ2LTEuNTEyLS41NjYtLjM1Ny0xLjIyLS41NDMtMS44ODktLjU0My0uMTY5IDAtLjMzNy4wMTItLjUwNi4wMzUtLjY3LjA5My0xLjMwMy4zNjUtMS44MjcuNzg3LS41MjUuNDIzLS45MjYuOTc0LTEuMTYzIDEuNTk3LS4yMzYuNjIzLS4zMDQgMS4yOTUtLjE5NiAxLjk1My4xMDguNjU4LjM5IDEuMjc1LjgxNyAxLjc4Ny4xNzYuMjExLjM3NS40MDEuNTkzLjU2Ni0uMDYxLjE5My0uMTI0LjM4Ni0uMTg4LjU3OC0uNTI1IDEuNTc1LTEuMDY5IDMuMjA1LTIuMDI2IDQuNjI1LS4zNjkuNTQ3LS43OTcgMS4wNjMtMS4yOTEgMS41MzQtLjQ5NC40NzItMS4wNTMuODk3LTEuNjc3IDEuMjY3LS42MjQuMzctMS4zMTMuNjgzLTIuMDU5LjkzMy0uNzQ2LjI1LTEuNTQ3LjQzNi0yLjM5NS41NTYtLjg0OC4xMi0xLjc0MS4xNzQtMi42NzUuMTc0LS45MzQgMC0xLjgyNy0uMDU0LTIuNjc1LS4xNzQtLjg0OC0uMTItMS42NDktLjMwNi0yLjM5NS0uNTU2LS43NDYtLjI1LTEuNDM1LS41NjMtMi4wNTktLjkzMy0uNjI0LS4zNy0xLjE4My0uNzk1LTEuNjc3LTEuMjY3LS40OTQtLjQ3MS0uOTIyLS45ODctMS4yOTEtMS41MzQtLjk1Ny0xLjQyLTEuNTAxLTMuMDUtMi4wMjYtNC42MjUtLjA2NC0uMTkyLS4xMjctLjM4NS0uMTg4LS41NzguMjE4LS4xNjUuNDE3LS4zNTUuNTkzLS41NjYuNDI3LS41MTIuNzA5LTEuMTI5LjgxNy0xLjc4Ny4xMDgtLjY1OC4wNC0xLjMzLS4xOTYtMS45NTMtLjIzNy0uNjIzLS42MzgtMS4xNzQtMS4xNjMtMS41OTctLjUyNC0uNDIyLTEuMTU3LS42OTQtMS44MjctLjc4Ny0uMTY5LS4wMjMtLjMzNy0uMDM1LS41MDYtLjAzNS0uNjY5IDAtMS4zMjMuMTg2LTEuODg5LjU0My0uNTY3LjM1Ni0uOTk3Ljg3Ny0xLjI0NiAxLjUxMi0uMjQ5LjYzNS0uMzE5IDEuMzItLjIwNSAxLjk5LjExNC42Ny40MDkgMS4yOTkuODU2IDEuODIxLjQ0Ny41MjIgMS4wMzIuOTIxIDEuNjkgMS4xNTUuNjU4LjIzNCAxLjM2Ny4zIDIuMDYuMTkxLjE3LS4wMjcuMzM3LS4wNjUuNS0uMTEzLjA2MS4xOTMuMTI0LjM4Ni4xODguNTc4LjUyNSAxLjU3NSAxLjA2OSAzLjIwNSAyLjAyNiA0LjYyNS4zNjkuNTQ3Ljc5NyAxLjA2MyAxLjI5MSAxLjUzNC40OTQuNDcyIDEuMDUzLjg5NyAxLjY3NyAxLjI2Ny42MjQuMzcgMS4zMTMuNjgzIDIuMDU5LjkzMy43NDYuMjUgMS41NDcuNDM2IDIuMzk1LjU1Ni44NDguMTIgMS43NDEuMTc0IDIuNjc1LjE3NC45MzQgMCAxLjgyNy0uMDU0IDIuNjc1LS4xNzQuODQ4LS4xMiAxLjY0OS0uMzA2IDIuMzk1LS41NTYuNzQ2LS4yNSAxLjQzNS0uNTYzIDIuMDU5LS45MzMuNjI0LS4zNyAxLjE4My0uNzk1IDEuNjc3LTEuMjY3LjQ5NC0uNDcxLjkyMi0uOTg3IDEuMjkxLTEuNTM0Ljk1Ny0xLjQyIDEuNTAxLTMuMDUgMi4wMjYtNC42MjUuMDY0LS4xOTIuMTI3LS4zODUuMTg4LS41NzgtLjE2My4wNDgtLjMzLjA4Ni0uNS4xMTMtLjY5My4xMDktMS40MDIuMDQzLTIuMDYtLjE5MS0uNjU4LS4yMzQtMS4yNDMtLjYzMy0xLjY5LTEuMTU1LS40NDctLjUyMi0uNzQyLTEuMTUxLS44NTYtMS44MjEtLjExNC0uNjcuMDQ0LTEuMzU1LjI5My0xLjk5eiIvPjxwYXRoIGZpbGw9IiM2NjQ1MDAiIGQ9Ik0xOCAzNmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzctLjExOC0uMTk5LjE5MS0uMjcyLjQ5OS0uNDM2LjgyOS0uNDM2LjE1MyAwIC4zMDYuMDM1LjQ0Ny4xMDUuNDk0LjI0Ny42OTQuODQ4LjQ0NyAxLjM0Mi0uMDM1LjA3LS4wNzQuMTM3LS4xMTguMTk5LS4xOTEuMjcyLS40OTkuNDM2LS44MjkuNDM2em0wLTJjLS4xNTMgMC0uMzA2LS4wMzUtLjQ0Ny0uMTA1LS40OTQtLjI0Ny0uNjk0LS44NDgtLjQ0Ny0xLjM0Mi4wMzUtLjA3LjA3NC0uMTM3LjExOC0uMTk5LjE5MS0uMjcyLjQ5OS0uNDM2LjgyOS0uNDM2LjE1MyAwIC4zMDYuMDM1LjQ0Ny4xMDUuNDk0LjI0Ny42OTQuODQ4LjQ0NyAxLjM0Mi0uMDM1LjA3LS4wNzQuMTM3LS4xMTguMTk5LS4xOTEuMjcyLS40OTkuNDM2LS44MjkuNDM2em0wLTJjLS4xNTMgMC0uMzA2LS4wMzUtLjQ0Ny0uMTA1LS40OTQtLjI0Ny0uNjk0LS44NDgtLjQ0Ny0xLjM0Mi4wMzUtLjA3LjA3NC0uMTM3LjExOC0uMTk5LjE5MS0uMjcyLjQ5OS0uNDM2LjgyOS0uNDM2LjE1MyAwIC4zMDYuMDM1LjQ0Ny4xMDUuNDk0LjI0Ny42OTQuODQ4LjQ0NyAxLjM0Mi0uMDM1LjA3LS4wNzQuMTM3LS4xMTguMTk5LS4xOTEuMjcyLS40OTkuNDM2LS44MjkuNDM2em0wLTJjLS4xNTMgMC0uMzA2LS4wMzUtLjQ0Ny0uMTA1LS40OTQtLjI0Ny0uNjk0LS44NDgtLjQ0Ny0xLjM0Mi4wMzUtLjA3LjA3NC0uMTM3LjExOC0uMTk5LjE5MS0uMjcyLjQ5OS0uNDM2LjgyOS0uNDM2LjE1MyAwIC4zMDYuMDM1LjQ0Ny4xMDUuNDk0LjI0Ny42OTQuODQ4LjQ0NyAxLjM0Mi0uMDM1LjA3LS4wNzQuMTM3LS4xMTguMTk5LS4xOTEuMjcyLS40OTkuNDM2LS44MjkuNDM2eiIvPjwvc3ZnPg==" class="decoration balloon2" alt="气球">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0ZGOTZDOCIgZD0iTTM1LjgxNSAxMC4wNTJjLS4yNDktLjYzNS0uNjc5LTEuMTU2LTEuMjQ2LTEuNTEyLS41NjYtLjM1Ny0xLjIyLS41NDMtMS44ODktLjU0My0uMTY5IDAtLjMzNy4wMTItLjUwNi4wMzUtLjY3LjA5My0xLjMwMy4zNjUtMS44MjcuNzg3LS41MjUuNDIzLS45MjYuOTc0LTEuMTYzIDEuNTk3LS4yMzYuNjIzLS4zMDQgMS4yOTUtLjE5NiAxLjk1My4xMDguNjU4LjM5IDEuMjc1LjgxNyAxLjc4Ny4xNzYuMjExLjM3NS40MDEuNTkzLjU2Ni0uMDYxLjE5My0uMTI0LjM4Ni0uMTg4LjU3OC0uNTI1IDEuNTc1LTEuMDY5IDMuMjA1LTIuMDI2IDQuNjI1LS4zNjkuNTQ3LS43OTcgMS4wNjMtMS4yOTEgMS41MzQtLjQ5NC40NzItMS4wNTMuODk3LTEuNjc3IDEuMjY3LS42MjQuMzctMS4zMTMuNjgzLTIuMDU5LjkzMy0uNzQ2LjI1LTEuNTQ3LjQzNi0yLjM5NS41NTYtLjg0OC4xMi0xLjc0MS4xNzQtMi42NzUuMTc0LS45MzQgMC0xLjgyNy0uMDU0LTIuNjc1LS4xNzQtLjg0OC0uMTItMS42NDktLjMwNi0yLjM5NS0uNTU2LS43NDYtLjI1LTEuNDM1LS41NjMtMi4wNTktLjkzMy0uNjI0LS4zNy0xLjE4My0uNzk1LTEuNjc3LTEuMjY3LS40OTQtLjQ3MS0uOTIyLS45ODctMS4yOTEtMS41MzQtLjk1Ny0xLjQyLTEuNTAxLTMuMDUtMi4wMjYtNC42MjUtLjA2NC0uMTkyLS4xMjctLjM4NS0uMTg4LS41NzguMjE4LS4xNjUuNDE3LS4zNTUuNTkzLS41NjYuNDI3LS41MTIuNzA5LTEuMTI5LjgxNy0xLjc4Ny4xMDgtLjY1OC4wNC0xLjMzLS4xOTYtMS45NTMtLjIzNy0uNjIzLS42MzgtMS4xNzQtMS4xNjMtMS41OTctLjUyNC0uNDIyLTEuMTU3LS42OTQtMS44MjctLjc4Ny0uMTY5LS4wMjMtLjMzNy0uMDM1LS41MDYtLjAzNS0uNjY5IDAtMS4zMjMuMTg2LTEuODg5LjU0My0uNTY3LjM1Ni0uOTk3Ljg3Ny0xLjI0NiAxLjUxMi0uMjQ5LjYzNS0uMzE5IDEuMzItLjIwNSAxLjk5LjExNC42Ny40MDkgMS4yOTkuODU2IDEuODIxLjQ0Ny41MjIgMS4wMzIuOTIxIDEuNjkgMS4xNTUuNjU4LjIzNCAxLjM2Ny4zIDIuMDYuMTkxLjE3LS4wMjcuMzM3LS4wNjUuNS0uMTEzLjA2MS4xOTMuMTI0LjM4Ni4xODguNTc4LjUyNSAxLjU3NSAxLjA2OSAzLjIwNSAyLjAyNiA0LjYyNS4zNjkuNTQ3Ljc5NyAxLjA2MyAxLjI5MSAxLjUzNC40OTQuNDcyIDEuMDUzLjg5NyAxLjY3NyAxLjI2Ny42MjQuMzcgMS4zMTMuNjgzIDIuMDU5LjkzMy43NDYuMjUgMS41NDcuNDM2IDIuMzk1LjU1Ni44NDguMTIgMS43NDEuMTc0IDIuNjc1LjE3NC45MzQgMCAxLjgyNy0uMDU0IDIuNjc1LS4xNzQuODQ4LS4xMiAxLjY0OS0uMzA2IDIuMzk1LS41NTYuNzQ2LS4yNSAxLjQzNS0uNTYzIDIuMDU5LS45MzMuNjI0LS4zNyAxLjE4My0uNzk1IDEuNjc3LTEuMjY3LjQ5NC0uNDcxLjkyMi0uOTg3IDEuMjkxLTEuNTM0Ljk1Ny0xLjQyIDEuNTAxLTMuMDUgMi4wMjYtNC42MjUuMDY0LS4xOTIuMTI3LS4zODUuMTg4LS41NzgtLjE2My4wNDgtLjMzLjA4Ni0uNS4xMTMtLjY5My4xMDktMS40MDIuMDQzLTIuMDYtLjE5MS0uNjU4LS4yMzQtMS4yNDMtLjYzMy0xLjY5LTEuMTU1LS40NDctLjUyMi0uNzQyLTEuMTUxLS44NTYtMS44MjEtLjExNC0uNjcuMDQ0LTEuMzU1LjI5My0xLjk5eiIvPjxwYXRoIGZpbGw9IiM2NjQ1MDAiIGQ9Ik0xOCAzNmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6bTAtMmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6bTAtMmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6bTAtMmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6Ii8+PC9zdmc+" class="decoration balloon3" alt="气球">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iIzVDOTEzQiIgZD0iTTM1LjgxNSAxMC4wNTJjLS4yNDktLjYzNS0uNjc5LTEuMTU2LTEuMjQ2LTEuNTEyLS41NjYtLjM1Ny0xLjIyLS41NDMtMS44ODktLjU0My0uMTY5IDAtLjMzNy4wMTItLjUwNi4wMzUtLjY3LjA5My0xLjMwMy4zNjUtMS44MjcuNzg3LS41MjUuNDIzLS45MjYuOTc0LTEuMTYzIDEuNTk3LS4yMzYuNjIzLS4zMDQgMS4yOTUtLjE5NiAxLjk1My4xMDguNjU4LjM5IDEuMjc1LjgxNyAxLjc4Ny4xNzYuMjExLjM3NS40MDEuNTkzLjU2Ni0uMDYxLjE5My0uMTI0LjM4Ni0uMTg4LjU3OC0uNTI1IDEuNTc1LTEuMDY5IDMuMjA1LTIuMDI2IDQuNjI1LS4zNjkuNTQ3LS43OTcgMS4wNjMtMS4yOTEgMS41MzQtLjQ5NC40NzItMS4wNTMuODk3LTEuNjc3IDEuMjY3LS42MjQuMzctMS4zMTMuNjgzLTIuMDU5LjkzMy0uNzQ2LjI1LTEuNTQ3LjQzNi0yLjM5NS41NTYtLjg0OC4xMi0xLjc0MS4xNzQtMi42NzUuMTc0LS45MzQgMC0xLjgyNy0uMDU0LTIuNjc1LS4xNzQtLjg0OC0uMTItMS42NDktLjMwNi0yLjM5NS0uNTU2LS43NDYtLjI1LTEuNDM1LS41NjMtMi4wNTktLjkzMy0uNjI0LS4zNy0xLjE4My0uNzk1LTEuNjc3LTEuMjY3LS40OTQtLjQ3MS0uOTIyLS45ODctMS4yOTEtMS41MzQtLjk1Ny0xLjQyLTEuNTAxLTMuMDUtMi4wMjYtNC42MjUtLjA2NC0uMTkyLS4xMjctLjM4NS0uMTg4LS41NzguMjE4LS4xNjUuNDE3LS4zNTUuNTkzLS41NjYuNDI3LS41MTIuNzA5LTEuMTI5LjgxNy0xLjc4Ny4xMDgtLjY1OC4wNC0xLjMzLS4xOTYtMS45NTMtLjIzNy0uNjIzLS42MzgtMS4xNzQtMS4xNjMtMS41OTctLjUyNC0uNDIyLTEuMTU3LS42OTQtMS44MjctLjc4Ny0uMTY5LS4wMjMtLjMzNy0uMDM1LS41MDYtLjAzNS0uNjY5IDAtMS4zMjMuMTg2LTEuODg5LjU0My0uNTY3LjM1Ni0uOTk3Ljg3Ny0xLjI0NiAxLjUxMi0uMjQ5LjYzNS0uMzE5IDEuMzItLjIwNSAxLjk5LjExNC42Ny40MDkgMS4yOTkuODU2IDEuODIxLjQ0Ny41MjIgMS4wMzIuOTIxIDEuNjkgMS4xNTUuNjU4LjIzNCAxLjM2Ny4zIDIuMDYuMTkxLjE3LS4wMjcuMzM3LS4wNjUuNS0uMTEzLjA2MS4xOTMuMTI0LjM4Ni4xODguNTc4LjUyNSAxLjU3NSAxLjA2OSAzLjIwNSAyLjAyNiA0LjYyNS4zNjkuNTQ3Ljc5NyAxLjA2MyAxLjI5MSAxLjUzNC40OTQuNDcyIDEuMDUzLjg5NyAxLjY3NyAxLjI2Ny42MjQuMzcgMS4zMTMuNjgzIDIuMDU5LjkzMy43NDYuMjUgMS41NDcuNDM2IDIuMzk1LjU1Ni44NDguMTIgMS43NDEuMTc0IDIuNjc1LjE3NC45MzQgMCAxLjgyNy0uMDU0IDIuNjc1LS4xNzQuODQ4LS4xMiAxLjY0OS0uMzA2IDIuMzk1LS41NTYuNzQ2LS4yNSAxLjQzNS0uNTYzIDIuMDU5LS45MzMuNjI0LS4zNyAxLjE4My0uNzk1IDEuNjc3LTEuMjY3LjQ5NC0uNDcxLjkyMi0uOTg3IDEuMjkxLTEuNTM0Ljk1Ny0xLjQyIDEuNTAxLTMuMDUgMi4wMjYtNC42MjUuMDY0LS4xOTIuMTI3LS4zODUuMTg4LS41NzgtLjE2My4wNDgtLjMzLjA4Ni0uNS4xMTMtLjY5My4xMDktMS40MDIuMDQzLTIuMDYtLjE5MS0uNjU4LS4yMzQtMS4yNDMtLjYzMy0xLjY5LTEuMTU1LS40NDctLjUyMi0uNzQyLTEuMTUxLS44NTYtMS44MjEtLjExNC0uNjcuMDQ0LTEuMzU1LjI5My0xLjk5eiIvPjxwYXRoIGZpbGw9IiM2NjQ1MDAiIGQ9Ik0xOCAzNmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6bTAtMmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6bTAtMmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6bTAtMmMtLjE1MyAwLS4zMDYtLjAzNS0uNDQ3LS4xMDUtLjQ5NC0uMjQ3LS42OTQtLjg0OC0uNDQ3LTEuMzQyLjAzNS0uMDcuMDc0LS4xMzcuMTE4LS4xOTkuMTkxLS4yNzIuNDk5LS40MzYuODI5LS40MzYuMTUzIDAgLjMwNi4wMzUuNDQ3LjEwNS40OTQuMjQ3LjY5NC44NDguNDQ3IDEuMzQyLS4wMzUuMDctLjA3NC4xMzctLjExOC4xOTktLjE5MS4yNzItLjQ5OS40MzYtLjgyOS40MzZ6Ii8+PC9zdmc+" class="decoration balloon4" alt="气球">
    </div>

    <script>
        // 转盘配置
        const prizes = [
            { name: "玩具车", color: "#FF4081" },
            { name: "彩笔套装", color: "#9C27B0" },
            { name: "积木", color: "#3F51B5" },
            { name: "故事书", color: "#2196F3" },
            { name: "气球", color: "#00BCD4" },
            { name: "小贴纸", color: "#4CAF50" },
            { name: "橡皮泥", color: "#FFC107" },
            { name: "棒棒糖", color: "#FF5722" }
        ];

        // 获取Canvas元素和上下文
        const canvas = document.getElementById('wheelCanvas');
        const ctx = canvas.getContext('2d');
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const radius = canvas.width / 2 - 10;

        // 绘制转盘
        function drawWheel() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 计算每个奖项的角度
            const anglePerPrize = (2 * Math.PI) / prizes.length;

            for (let i = 0; i < prizes.length; i++) {
                // 开始绘制扇形
                const startAngle = i * anglePerPrize;
                const endAngle = (i + 1) * anglePerPrize;

                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.arc(centerX, centerY, radius, startAngle, endAngle);
                ctx.closePath();

                // 填充扇形颜色
                ctx.fillStyle = prizes[i].color;
                ctx.fill();

                // 绘制分割线
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(centerX + Math.cos(startAngle) * radius, centerY + Math.sin(startAngle) * radius);
                ctx.lineWidth = 2;
                ctx.strokeStyle = 'white';
                ctx.stroke();
                ctx.restore();

                // 绘制奖品名称
                ctx.save();
                ctx.translate(centerX, centerY);
                ctx.rotate(startAngle + anglePerPrize / 2);
                ctx.textAlign = 'center';
                ctx.fillStyle = 'white';
                ctx.font = 'bold 16px Microsoft YaHei';

                // 将文字绘制在扇形中间位置
                ctx.translate(radius * 0.65, 0);
                ctx.rotate(Math.PI / 2); // 旋转文字使其垂直于半径
                ctx.fillText(prizes[i].name, 0, 0);
                ctx.restore();
            }

            // 绘制中心圆
            ctx.beginPath();
            ctx.arc(centerX, centerY, 30, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.strokeStyle = '#FF4081';
            ctx.lineWidth = 2;
            ctx.stroke();
        }

        // 初始化转盘
        drawWheel();

        // 旋转动画变量
        let isSpinning = false;
        let currentRotation = 0;
        let spinTimeout = null;

        // 点击开始按钮旋转转盘
        document.getElementById('spinBtn').addEventListener('click', function() {
            if (isSpinning) return;

            isSpinning = true;

            // 随机选择一个奖品
            const randomPrize = Math.floor(Math.random() * prizes.length);

            // 计算旋转角度 (多转几圈再停在选中的奖品上)
            const targetAngle = 360 * 5 + (360 / prizes.length) * (prizes.length - randomPrize);

            // 设置旋转动画
            let currentAngle = 0;
            const spinSpeed = 10;
            const slowdownRate = 0.98;
            let speed = spinSpeed;

            function rotateWheel() {
                if (currentAngle >= targetAngle) {
                    isSpinning = false;
                    setTimeout(() => {
                        alert(`恭喜你获得了: ${prizes[randomPrize].name}！祝六一儿童节快乐！`);
                    }, 500);
                    return;
                }

                // 逐渐减速
                if (currentAngle > targetAngle * 0.7) {
                    speed *= slowdownRate;
                }

                currentAngle += speed;
                currentRotation += speed;

                // 应用旋转
                canvas.style.transform = `rotate(${currentRotation}deg)`;

                spinTimeout = requestAnimationFrame(rotateWheel);
            }

            rotateWheel();
        });
    </script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-05-31，如有侵权请联系 cloudcommunity@tencent.com 删除

编程