<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>极简趣味Canvas | 旋转彩虹环</title>
    <style>
        body {
            background: #0a0f1e;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }
        canvas {
            border-radius: 24px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            background: #000;
        }
    </style>
</head>
<body>
<canvas id="funCanvas" width="500" height="500"></canvas>

<script>
    const canvas = document.getElementById('funCanvas');
    const ctx = canvas.getContext('2d');
    let angle = 0;  // 旋转角度

    function draw() {
        // 清屏
        ctx.fillStyle = '#0a0f1e';
        ctx.fillRect(0, 0, 500, 500);
        
        // 移动坐标系到画布中心
        ctx.save();
        ctx.translate(250, 250);
        ctx.rotate(angle);
        
        // 绘制一个渐变圆环（趣味效果）
        const gradient = ctx.createLinearGradient(-120, -120, 120, 120);
        gradient.addColorStop(0, '#ff4d4d');
        gradient.addColorStop(0.2, '#ffa64d');
        gradient.addColorStop(0.4, '#ffff4d');
        gradient.addColorStop(0.6, '#4dff4d');
        gradient.addColorStop(0.8, '#4dd2ff');
        gradient.addColorStop(1, '#bf4dff');
        
        ctx.beginPath();
        ctx.arc(0, 0, 150, 0, Math.PI * 2);
        ctx.fillStyle = gradient;
        ctx.fill();
        
        // 加一个内圈白色高光
        ctx.beginPath();
        ctx.arc(0, 0, 90, 0, Math.PI * 2);
        ctx.fillStyle = '#ffffff80';
        ctx.fill();
        
        // 最中心的小圆
        ctx.beginPath();
        ctx.arc(0, 0, 40, 0, Math.PI * 2);
        ctx.fillStyle = '#ffcc33';
        ctx.fill();
        
        ctx.restore();
        
        // 角度递增，产生旋转
        angle += 0.02;
        requestAnimationFrame(draw);
    }
    
    draw();
</script>
</body>
</html>

最短版本（一个跳动的小球，20行代码）：

<canvas id="c" width="400" height="400"></canvas>
<script>
const c = document.getElementById('c'), ctx = c.getContext('2d');
let r = 30, growing = true;
function draw() {
    ctx.fillStyle = '#0a2f3a';
    ctx.fillRect(0, 0, 400, 400);
    ctx.beginPath();
    ctx.arc(200, 200, r, 0, Math.PI*2);
    ctx.fillStyle = '#ff8c5a';
    ctx.fill();
    r = growing ? r+1 : r-1;
    if (r > 80) growing = false;
    if (r < 20) growing = true;
    requestAnimationFrame(draw);
}
draw();
</script>

# css # javascript # 前端
Logo
DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

cover

派 5 个子 agent 并行干活，账单却几乎只算一份——扒一扒 Claude Code 的 Prompt Cache 与多 agent 缓存共享

avatar DeepSeek技术社区
cover

太6了，这个开源工具让你的Claude Code 使用成本直降80%

avatar DeepSeek技术社区

＜p＞2025至2026年，生成式AI技术全面落地商用，企业的数字触点已经从传统搜索引擎、社交平台延伸到豆包、DeepSeek、通义千问等各类生成式AI入口，生成式引擎优化（GEO）也随之成为企业数字

2026年生成式AI已经全面渗透到用户信息获取、消费决策、服务选择的全链路，生成式引擎优化（GEO）也从少数企业的尝试性布局，变成了所有想要获取线上流量企业的刚需配置。作为西南地区数字经济核心发展城市，成都聚集了超过40万家中小微企业、近万家规上企业，大量企业迫切需要靠谱的GEO服务，帮助自身在豆包、DeepSeek、通义千问等主流生成式AI平台的搜索结果中占据有利位置，获得精准的客群触达机会。本

avatar DeepSeek技术社区