deepseek网页版鹈鹕骑自行车用的快速模式

·2026-08-25

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鹈鹕骑自行车 · 动画</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background: #1e3c4f;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    }
    .card {
      background: #9fc7d9;
      padding: 20px 20px 25px;
      border-radius: 48px 48px 32px 32px;
      box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
      transition: 0.2s;
    }
    canvas {
      display: block;
      width: 800px;
      max-width: 100%;
      height: auto;
      aspect-ratio: 800 / 450;
      border-radius: 28px;
      background: #b3d9ef;
      box-shadow: inset 0 0 0 2px #d7ecf7, 0 8px 12px rgba(0,0,0,0.3);
      cursor: pointer;
    }
    .caption {
      margin-top: 14px;
      text-align: center;
      font-weight: 600;
      color: #f5f9ff;
      text-shadow: 0 2px 3px #1f3f4a;
      letter-spacing: 2px;
      font-size: 1.1rem;
      background: #568296;
      padding: 6px 18px;
      border-radius: 60px;
      display: inline-block;
      backdrop-filter: blur(2px);
      box-shadow: inset 0 1px 4px #b3d9ef;
    }
    .footer {
      display: flex;
      justify-content: center;
      margin-top: 6px;
    }
  </style>
</head>
<body>
<div class="card">
  <canvas id="canvas" width="800" height="450"></canvas>
  <div class="footer">
    <span class="caption">🚲 鹈鹕兜风 · 踏板加速中</span>
  </div>
</div>
<script>
  (function() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // 尺寸参数
    const W = 800, H = 450;
    // 自行车/鹈鹕 整体位置 (车轴中心)
    let bikeX = 160;          // 初始X
    const bikeY = 290;        // 地面高度 (车轮着地点)
    const wheelRadius = 28;
    const pedalRadius = 12;

    // 动画状态
    let angle = 0;            // 脚踏旋转角度 (弧度)
    let frameId = null;

    // ---------- 绘制函数 ----------
    function drawScene(angleRad) {
      ctx.clearRect(0, 0, W, H);

      // ------- 背景 -------
      // 天空渐变
      const skyGrad = ctx.createLinearGradient(0, 0, 0, H);
      skyGrad.addColorStop(0, '#abd9f0');
      skyGrad.addColorStop(0.7, '#d3ecfa');
      ctx.fillStyle = skyGrad;
      ctx.fillRect(0, 0, W, H);

      // 远山/云 (简单装饰)
      ctx.fillStyle = 'rgba(255,255,240,0.2)';
      for (let i = 0; i < 4; i++) {
        let x = (i * 230 + frameId * 0.2) % 900 - 100;
        ctx.beginPath();
        ctx.arc(x, 70, 50 + i * 12, 0, Math.PI * 2);
        ctx.fill();
      }
      // 云朵 (慢速飘动)
      ctx.fillStyle = 'rgba(255,255,255,0.5)';
      const cloudOff = (frameId * 0.08) % 900;
      for (let i = 0; i < 5; i++) {
        let cx = (i * 190 + cloudOff) % 1000 - 100;
        ctx.beginPath();
        ctx.arc(cx, 40 + i * 8, 32 + i * 5, 0, Math.PI * 2);
        ctx.arc(cx + 40, 30 + i * 6, 28 + i * 4, 0, Math.PI * 2);
        ctx.arc(cx - 30, 30 + i * 7, 26 + i * 3, 0, Math.PI * 2);
        ctx.fill();
      }

      // 草地 / 地面
      ctx.fillStyle = '#6ba87a';
      ctx.fillRect(0, bikeY + 6, W, H - bikeY + 10);
      // 草地细节
      ctx.fillStyle = '#4e8b5a';
      for (let i = 0; i < 40; i++) {
        let gx = (i * 27 + frameId * 0.6) % 850 - 20;
        let gy = bikeY + 12 + Math.sin(i + frameId * 0.02) * 8;
        ctx.beginPath();
        ctx.ellipse(gx, gy, 5, 12, 0.2, 0, Math.PI * 2);
        ctx.fill();
      }
      // 小路 (浅色)
      ctx.fillStyle = '#c0b28a';
      ctx.beginPath();
      ctx.ellipse(400, bikeY + 18, 320, 10, 0, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = '#b3a07a';
      ctx.beginPath();
      ctx.ellipse(420, bikeY + 24, 200, 6, 0, 0, Math.PI * 2);
      ctx.fill();

      // ------- 自行车 (先绘制，位于鹈鹕下方) -------
      const cx = bikeX, cy = bikeY;   // 后轮轴心

      // 1. 车轮 (后轮 & 前轮)
      ctx.lineWidth = 4;
      ctx.strokeStyle = '#1f2a36';
      ctx.fillStyle = '#2f3f4a';
      // 后轮
      ctx.beginPath();
      ctx.arc(cx, cy, wheelRadius, 0, Math.PI * 2);
      ctx.fillStyle = '#2d3d47';
      ctx.fill();
      ctx.strokeStyle = '#0e1419';
      ctx.lineWidth = 3.5;
      ctx.stroke();
      // 轮辐 (后轮)
      ctx.strokeStyle = '#7a8a94';
      ctx.lineWidth = 2;
      for (let i = 0; i < 10; i++) {
        let rad = (i / 10) * Math.PI * 2 + angleRad * 0.5;
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + Math.cos(rad) * wheelRadius * 0.9, cy + Math.sin(rad) * wheelRadius * 0.9);
        ctx.stroke();
      }
      // 前轮 (距离后轮 96px)
      const frontX = cx + 96;
      ctx.beginPath();
      ctx.arc(frontX, cy, wheelRadius, 0, Math.PI * 2);
      ctx.fillStyle = '#2d3d47';
      ctx.fill();
      ctx.strokeStyle = '#0e1419';
      ctx.lineWidth = 3.5;
      ctx.stroke();
      ctx.strokeStyle = '#7a8a94';
      ctx.lineWidth = 2;
      for (let i = 0; i < 10; i++) {
        let rad = (i / 10) * Math.PI * 2 + angleRad * 0.5 + 0.3;
        ctx.beginPath();
        ctx.moveTo(frontX, cy);
        ctx.lineTo(frontX + Math.cos(rad) * wheelRadius * 0.9, cy + Math.sin(rad) * wheelRadius * 0.9);
        ctx.stroke();
      }

      // 2. 车架 (斜杠/坐垫/把手)
      ctx.strokeStyle = '#3d4f5e';
      ctx.lineWidth = 6;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
      // 主梁: 后轴 -> 车头立管 (前轴上方)
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.lineTo(cx + 70, cy - 30);
      ctx.stroke();
      // 下梁: 后轴 -> 中轴 (脚踏位置)
      const pedalX = cx + 32;
      const pedalY = cy + 6;
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.lineTo(pedalX, pedalY);
      ctx.stroke();
      // 斜撑: 中轴 -> 车头立管
      ctx.beginPath();
      ctx.moveTo(pedalX, pedalY);
      ctx.lineTo(cx + 70, cy - 30);
      ctx.stroke();
      // 后上叉: 后轴 -> 坐垫
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.lineTo(cx + 18, cy - 38);
      ctx.stroke();
      // 坐垫
      ctx.fillStyle = '#2a1f1a';
      ctx.beginPath();
      ctx.ellipse(cx + 18, cy - 42, 16, 6, -0.1, 0, Math.PI * 2);
      ctx.fill();
      ctx.strokeStyle = '#16100c';
      ctx.lineWidth = 2.5;
      ctx.stroke();

      // 把手 (车头)
      ctx.strokeStyle = '#3d4f5e';
      ctx.lineWidth = 6;
      ctx.beginPath();
      ctx.moveTo(cx + 70, cy - 30);
      ctx.lineTo(cx + 86, cy - 42);
      ctx.stroke();
      // 把手握柄
      ctx.fillStyle = '#1d1d1d';
      ctx.beginPath();
      ctx.arc(cx + 86, cy - 42, 6, 0, Math.PI * 2);
      ctx.fill();

      // 脚踏 (带曲柄)
      const crankLen = 18;
      const pedalAngle = angleRad;
      // 左脚踏 (曲柄)
      const leftPedalX = pedalX + Math.cos(pedalAngle) * crankLen;
      const leftPedalY = pedalY + Math.sin(pedalAngle) * crankLen;
      // 右脚踏 (对侧)
      const rightPedalX = pedalX + Math.cos(pedalAngle + Math.PI) * crankLen;
      const rightPedalY = pedalY + Math.sin(pedalAngle + Math.PI) * crankLen;

      ctx.strokeStyle = '#4f606b';
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.moveTo(pedalX, pedalY);
      ctx.lineTo(leftPedalX, leftPedalY);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(pedalX, pedalY);
      ctx.lineTo(rightPedalX, rightPedalY);
      ctx.stroke();

      // 脚踏板 (小矩形)
      ctx.fillStyle = '#39434a';
      ctx.shadowColor = '#1c252b';
      ctx.shadowBlur = 6;
      ctx.fillRect(leftPedalX - 6, leftPedalY - 4, 12, 8);
      ctx.fillRect(rightPedalX - 6, rightPedalY - 4, 12, 8);
      ctx.shadowBlur = 0;

      // ----- 鹈鹕 (骑手) -----
      // 身体 (坐在坐垫上)
      const bodyX = cx + 10;
      const bodyY = cy - 58;

      // 大喙 (鹈鹕标志)  先画喙，再画头，让喙在后方
      ctx.fillStyle = '#f7c842';
      ctx.strokeStyle = '#c48f2b';
      ctx.lineWidth = 2;
      // 上喙 (长而宽)
      ctx.beginPath();
      ctx.ellipse(bodyX + 32, bodyY - 12, 26, 10, 0.05, 0, Math.PI * 2);
      ctx.fill();
      ctx.stroke();
      // 下喙 (喉囊) 带一点弧度
      ctx.fillStyle = '#e8b13a';
      ctx.beginPath();
      ctx.ellipse(bodyX + 30, bodyY - 2, 22, 14, 0.1, 0, Math.PI * 2);
      ctx.fill();
      ctx.strokeStyle = '#b57d2a';
      ctx.stroke();
      // 喉囊细节 (一条线)
      ctx.beginPath();
      ctx.ellipse(bodyX + 28, bodyY + 2, 16, 8, 0.1, 0, Math.PI * 2);
      ctx.strokeStyle = '#b57d2a';
      ctx.lineWidth = 1.5;
      ctx.stroke();

      // 头部 (圆形)
      ctx.fillStyle = '#f5f0e6';
      ctx.strokeStyle = '#cbc1b0';
      ctx.lineWidth = 2.5;
      ctx.beginPath();
      ctx.arc(bodyX + 10, bodyY - 14, 22, 0, Math.PI * 2);
      ctx.fill();
      ctx.stroke();

      // 眼睛 (带高光)
      ctx.fillStyle = '#191c1f';
      ctx.beginPath();
      ctx.arc(bodyX + 16, bodyY - 20, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = 'white';
      ctx.beginPath();
      ctx.arc(bodyX + 18, bodyY - 22, 2, 0, Math.PI * 2);
      ctx.fill();
      // 眼睛瞳孔
      ctx.fillStyle = '#0a0c0e';
      ctx.beginPath();
      ctx.arc(bodyX + 18, bodyY - 20, 2, 0, Math.PI * 2);
      ctx.fill();

      // 身体 (椭圆)
      ctx.fillStyle = '#f5f0e6';
      ctx.strokeStyle = '#d6cdbb';
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.ellipse(bodyX, bodyY - 6, 28, 24, 0.1, 0, Math.PI * 2);
      ctx.fill();
      ctx.stroke();

      // 翅膀 (手臂) 握着把手
      ctx.fillStyle = '#ece5d6';
      ctx.strokeStyle = '#bfb4a0';
      ctx.lineWidth = 3;
      // 左翅膀 (上臂 + 前臂)
      ctx.beginPath();
      ctx.moveTo(bodyX - 6, bodyY - 16);
      ctx.lineTo(bodyX - 14, bodyY - 28);
      ctx.lineTo(bodyX + 4, bodyY - 34);
      ctx.fill();
      ctx.stroke();
      // 右翅膀 (伸向把手)
      ctx.beginPath();
      ctx.moveTo(bodyX + 16, bodyY - 18);
      ctx.lineTo(bodyX + 40, bodyY - 30);
      ctx.lineTo(bodyX + 56, bodyY - 34);
      ctx.fill();
      ctx.stroke();

      // 小细节: 羽毛纹理
      ctx.fillStyle = '#d8cfbc';
      ctx.beginPath();
      ctx.arc(bodyX - 4, bodyY - 2, 6, 0, Math.PI * 2);
      ctx.fill();

      // 腿 (踩在脚踏上) 左腿连接到左脚踏
      ctx.strokeStyle = '#e8dcc8';
      ctx.lineWidth = 7;
      ctx.lineCap = 'round';
      // 左腿 (从身体到左脚踏)
      ctx.beginPath();
      ctx.moveTo(bodyX - 4, bodyY + 10);
      ctx.lineTo(leftPedalX + 2, leftPedalY - 4);
      ctx.stroke();
      // 右腿 (从身体到右脚踏)
      ctx.beginPath();
      ctx.moveTo(bodyX + 8, bodyY + 10);
      ctx.lineTo(rightPedalX + 2, rightPedalY - 4);
      ctx.stroke();

      // 脚 (小椭圆)
      ctx.fillStyle = '#e0cfb5';
      ctx.beginPath();
      ctx.ellipse(leftPedalX, leftPedalY - 2, 6, 4, 0.1, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.ellipse(rightPedalX, rightPedalY - 2, 6, 4, 0.1, 0, Math.PI * 2);
      ctx.fill();

      // 最后: 加点装饰——鹈鹕的“发型” (冠羽)
      ctx.fillStyle = '#e8dbb8';
      ctx.beginPath();
      ctx.arc(bodyX + 6, bodyY - 34, 6, 0, Math.PI, true);
      ctx.fill();
      ctx.fillStyle = '#dccca8';
      ctx.beginPath();
      ctx.arc(bodyX + 12, bodyY - 36, 4, 0, Math.PI, true);
      ctx.fill();
    }

    // ---------- 动画循环 ----------
    let time = 0;

    function animate(timestamp) {
      if (!frameId) return;
      // 角度增量 (模拟踩踏板)
      angle += 0.09;
      // 自行车缓慢前进 (模拟移动)
      bikeX += 0.7;
      if (bikeX > 850) bikeX = -80;  // 循环

      // 全局帧计数用于云和草
      frameId = Math.floor(timestamp / 20) % 10000;

      drawScene(angle);
      requestAnimationFrame(animate);
    }

    // 启动动画
    function startAnimation() {
      if (frameId) return;
      frameId = 1;  // 占位
      requestAnimationFrame(animate);
    }

    // 点击canvas可重新触发/重置 (防止失焦暂停)
    canvas.addEventListener('click', () => {
      if (!frameId) {
        startAnimation();
      }
    });

    // 启动
    startAnimation();

    // 清理 (非必须)
    window.addEventListener('beforeunload', () => {
      frameId = null;
    });

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

登录后评论

阴明@kalasoo

·2026-08-25

可以试一试 #Canvas 功能哦

阿伦@alun

·2026-08-26

我昨天就发现并尝试了，但是要么就是说html格式不支持，要么就是说CanvasRenderingContext2D is not defined，一直没有成功

阴明@kalasoo

·2026-08-26

不支持 HTML，只支持 canvas js 的代码
感觉体验可以优化一下

阿伦@alun

·2026-08-26

这是代码

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 动画变量
let pedalAngle = 0;
let wheelAngle = 0;
let bikeX = 50;
let direction = 1;

// 绘制鹈鹕骑自行车
function drawPelicanBike(x, pedalAng, wheelAng) {
    // 地面
    ctx.fillStyle = '#7cb342';
    ctx.fillRect(0, 340, canvas.width, 60);
    ctx.fillStyle = '#558b2f';
    ctx.fillRect(0, 345, canvas.width, 2);
    
    // 自行车后轮
    const wheelR = 40;
    const rearX = x + 100;
    const frontX = x + 220;
    const wheelY = 300;
    
    // 绘制车轮
    function drawWheel(cx, cy, r, angle) {
        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, Math.PI * 2);
        ctx.strokeStyle = '#333';
        ctx.lineWidth = 4;
        ctx.stroke();
        
        // 轮毂
        ctx.beginPath();
        ctx.arc(cx, cy, 3, 0, Math.PI * 2);
        ctx.fillStyle = '#333';
        ctx.fill();
        
        // 辐条
        for (let i = 0; i < 8; i++) {
            const a = angle + (i * Math.PI / 4);
            ctx.beginPath();
            ctx.moveTo(cx, cy);
            ctx.lineTo(cx + Math.cos(a) * r, cy + Math.sin(a) * r);
            ctx.strokeStyle = '#333';
            ctx.lineWidth = 1.5;
            ctx.stroke();
        }
        
        // 轮胎纹理
        ctx.beginPath();
        ctx.arc(cx, cy, r + 2, 0, Math.PI * 2);
        ctx.strokeStyle = '#555';
        ctx.lineWidth = 1;
        ctx.setLineDash([3, 5]);
        ctx.stroke();
        ctx.setLineDash([]);
    }
    
    drawWheel(rearX, wheelY, wheelR, wheelAng);
    drawWheel(frontX, wheelY, wheelR, wheelAng + 0.5);
    
    // 自行车架
    ctx.strokeStyle = '#e53935';
    ctx.lineWidth = 5;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    
    // 座管
    ctx.beginPath();
    ctx.moveTo(rearX, wheelY);
    ctx.lineTo(rearX + 20, wheelY - 70);
    ctx.stroke();
    
    // 上管
    ctx.beginPath();
    ctx.moveTo(rearX + 20, wheelY - 70);
    ctx.lineTo(frontX - 10, wheelY - 70);
    ctx.stroke();
    
    // 下管
    ctx.beginPath();
    ctx.moveTo(rearX, wheelY);
    ctx.lineTo(rearX + 60, wheelY - 50);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(rearX + 60, wheelY - 50);
    ctx.lineTo(frontX - 10, wheelY - 70);
    ctx.stroke();
    
    // 后下叉
    ctx.beginPath();
    ctx.moveTo(rearX, wheelY);
    ctx.lineTo(rearX + 60, wheelY - 50);
    ctx.stroke();
    
    // 前叉
    ctx.beginPath();
    ctx.moveTo(frontX - 10, wheelY - 70);
    ctx.lineTo(frontX, wheelY);
    ctx.stroke();
    
    // 车座
    ctx.fillStyle = '#333';
    ctx.beginPath();
    ctx.ellipse(rearX + 20, wheelY - 73, 18, 5, 0, 0, Math.PI * 2);
    ctx.fill();
    
    // 车把
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(frontX - 10, wheelY - 70);
    ctx.lineTo(frontX + 20, wheelY - 90);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(frontX + 15, wheelY - 85);
    ctx.lineTo(frontX + 35, wheelY - 85);
    ctx.stroke();
    ctx.fillStyle = '#333';
    ctx.beginPath();
    ctx.arc(frontX + 35, wheelY - 85, 3, 0, Math.PI * 2);
    ctx.fill();
    
    // 踏板（旋转）
    const pedalCx = rearX + 60;
    const pedalCy = wheelY - 50;
    const pedalLen = 18;
    const pAngle = pedalAng;
    
    // 踏板曲柄
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(pedalCx, pedalCy);
    ctx.lineTo(pedalCx + Math.cos(pAngle) * pedalLen, pedalCy + Math.sin(pAngle) * pedalLen);
    ctx.stroke();
    // 第二个曲柄
    ctx.beginPath();
    ctx.moveTo(pedalCx, pedalCy);
    ctx.lineTo(pedalCx + Math.cos(pAngle + Math.PI) * pedalLen, pedalCy + Math.sin(pAngle + Math.PI) * pedalLen);
    ctx.stroke();
    
    // 踏板
    function drawPedal(px, py) {
        ctx.fillStyle = '#555';
        ctx.beginPath();
        ctx.roundRect(px - 10, py - 3, 20, 6, 2);
        ctx.fill();
    }
    drawPedal(pedalCx + Math.cos(pAngle) * pedalLen, pedalCy + Math.sin(pAngle) * pedalLen);
    drawPedal(pedalCx + Math.cos(pAngle + Math.PI) * pedalLen, pedalCy + Math.sin(pAngle + Math.PI) * pedalLen);
    
    // ---- 鹈鹕 ----
    const pelX = rearX + 40;
    const pelY = wheelY - 80;
    const bodyX = pelX;
    const bodyY = pelY;
    
    // 身体
    ctx.fillStyle = 'white';
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.ellipse(bodyX, bodyY, 36, 26, 0, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
    
    // 左翅膀（骑行姿势）
    const wingFlap = Math.sin(pedalAng * 0.8) * 0.2;
    ctx.fillStyle = '#f5f5f5';
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(bodyX - 30, bodyY - 5);
    ctx.quadraticCurveTo(bodyX - 50, bodyY - 30 + wingFlap * 20, bodyX - 25, bodyY + 15);
    ctx.fill();
    ctx.stroke();
    
    // 右翅膀
    ctx.beginPath();
    ctx.moveTo(bodyX + 30, bodyY - 5);
    ctx.quadraticCurveTo(bodyX + 55, bodyY - 35 + wingFlap * 15, bodyX + 25, bodyY + 15);
    ctx.fill();
    ctx.stroke();
    
    // 尾巴
    ctx.fillStyle = '#f5f5f5';
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(bodyX - 30, bodyY + 10);
    ctx.lineTo(bodyX - 55, bodyY + 25);
    ctx.lineTo(bodyX - 45, bodyY + 10);
    ctx.lineTo(bodyX - 60, bodyY + 15);
    ctx.lineTo(bodyX - 35, bodyY + 0);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    
    // 腿（踩踏板）
    const legAngle = pedalAng * 0.8;
    ctx.strokeStyle = '#f5a623';
    ctx.lineWidth = 4;
    ctx.lineCap = 'round';
    
    // 左腿（到踏板）
    const pedPosX = pedalCx + Math.cos(pedalAng) * pedalLen;
    const pedPosY = pedalCy + Math.sin(pedalAng) * pedalLen;
    const hipX = bodyX - 5;
    const hipY = bodyY + 22;
    
    ctx.beginPath();
    ctx.moveTo(hipX, hipY);
    const kneeX = hipX + 10 + Math.cos(pedalAng + 0.5) * 15;
    const kneeY = hipY + 10 + Math.sin(pedalAng + 0.5) * 15;
    ctx.quadraticCurveTo(kneeX, kneeY, pedPosX, pedPosY);
    ctx.stroke();
    
    // 脚
    ctx.fillStyle = '#f5a623';
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(pedPosX - 8, pedPosY);
    ctx.lineTo(pedPosX + 8, pedPosY + 2);
    ctx.lineTo(pedPosX + 5, pedPosY + 6);
    ctx.lineTo(pedPosX + 10, pedPosY + 5);
    ctx.lineTo(pedPosX + 6, pedPosY + 9);
    ctx.lineTo(pedPosX + 2, pedPosY + 7);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    
    // 右腿（到另一个踏板）
    const pedPosX2 = pedalCx + Math.cos(pedalAng + Math.PI) * pedalLen;
    const pedPosY2 = pedalCy + Math.sin(pedalAng + Math.PI) * pedalLen;
    ctx.strokeStyle = '#f5a623';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(hipX + 12, hipY);
    const kneeX2 = hipX + 22 + Math.cos(pedalAng + Math.PI - 0.5) * 15;
    const kneeY2 = hipY + 10 + Math.sin(pedalAng + Math.PI - 0.5) * 15;
    ctx.quadraticCurveTo(kneeX2, kneeY2, pedPosX2, pedPosY2);
    ctx.stroke();
    
    // 脖子
    ctx.fillStyle = 'white';
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(bodyX + 25, bodyY - 10);
    ctx.quadraticCurveTo(bodyX + 40, bodyY - 35, bodyX + 35, bodyY - 70);
    ctx.quadraticCurveTo(bodyX + 32, bodyY - 85, bodyX + 25, bodyY - 95);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(bodyX + 28, bodyY - 10);
    ctx.quadraticCurveTo(bodyX + 45, bodyY - 35, bodyX + 38, bodyY - 70);
    ctx.quadraticCurveTo(bodyX + 35, bodyY - 85, bodyX + 28, bodyY - 95);
    ctx.stroke();
    // 脖子填充
    ctx.strokeStyle = '#ddd';
    ctx.lineWidth = 12;
    ctx.beginPath();
    ctx.moveTo(bodyX + 25, bodyY - 10);
    ctx.quadraticCurveTo(bodyX + 42, bodyY - 35, bodyX + 36, bodyY - 70);
    ctx.quadraticCurveTo(bodyX + 33, bodyY - 85, bodyX + 26, bodyY - 95);
    ctx.stroke();
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(bodyX + 25, bodyY - 10);
    ctx.quadraticCurveTo(bodyX + 42, bodyY - 35, bodyX + 36, bodyY - 70);
    ctx.quadraticCurveTo(bodyX + 33, bodyY - 85, bodyX + 26, bodyY - 95);
    ctx.stroke();
    
    // 头部
    const headX = bodyX + 26;
    const headY = bodyY - 100;
    ctx.fillStyle = 'white';
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(headX, headY, 16, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
    
    // 头顶羽毛
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(headX - 6, headY - 13);
    ctx.quadraticCurveTo(headX - 2, headY - 28, headX + 4, headY - 13);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(headX + 2, headY - 15);
    ctx.quadraticCurveTo(headX + 6, headY - 32, headX + 10, headY - 15);
    ctx.stroke();
    
    // 眼睛
    ctx.fillStyle = '#333';
    ctx.beginPath();
    ctx.arc(headX + 8, headY - 3, 4, 0, Math.PI * 2);
    ctx.fill();
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(headX + 9, headY - 4, 1.5, 0, Math.PI * 2);
    ctx.fill();
    
    // 上喙
    ctx.fillStyle = '#f5a623';
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(headX + 14, headY + 2);
    ctx.quadraticCurveTo(headX + 34, headY - 8, headX + 48, headY - 3);
    ctx.quadraticCurveTo(headX + 34, headY + 2, headX + 16, headY + 6);
    ctx.fill();
    ctx.stroke();
    
    // 下喙/喉囊
    ctx.fillStyle = '#f5a623';
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(headX + 16, headY + 6);
    ctx.quadraticCurveTo(headX + 30, headY + 16, headX + 46, headY + 8);
    ctx.quadraticCurveTo(headX + 30, headY + 22, headX + 18, headY + 16);
    ctx.fill();
    ctx.stroke();
    // 喉囊颜色
    ctx.fillStyle = '#ffcc80';
    ctx.beginPath();
    ctx.moveTo(headX + 20, headY + 10);
    ctx.quadraticCurveTo(headX + 30, headY + 20, headX + 42, headY + 12);
    ctx.fill();
    
    // 嘴尖点
    ctx.fillStyle = '#e65100';
    ctx.beginPath();
    ctx.arc(headX + 46, headY - 2, 2, 0, Math.PI * 2);
    ctx.fill();
    
    // 运动头带
    ctx.strokeStyle = '#e53935';
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(headX - 10, headY - 8);
    ctx.quadraticCurveTo(headX + 2, headY - 16, headX + 14, headY - 10);
    ctx.stroke();
    // 头带飘带
    ctx.strokeStyle = '#e53935';
    ctx.lineWidth = 2.5;
    ctx.beginPath();
    ctx.moveTo(headX - 10, headY - 8);
    ctx.quadraticCurveTo(headX - 20, headY - 2, headX - 26, headY + 6);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(headX - 12, headY - 5);
    ctx.quadraticCurveTo(headX - 18, headY + 2, headX - 22, headY + 10);
    ctx.stroke();
    
    // 汗水
    const sweatAngle = pedalAng * 0.5;
    ctx.fillStyle = '#4fc3f7';
    ctx.beginPath();
    ctx.arc(headX - 6 + Math.sin(sweatAngle) * 2, headY - 6 + Math.cos(sweatAngle * 1.3) * 3, 2, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(headX - 8 + Math.sin(sweatAngle + 1) * 3, headY - 2 + Math.cos(sweatAngle * 0.9 + 0.5) * 2, 1.5, 0, Math.PI * 2);
    ctx.fill();
}

// roundRect polyfill for Canvas
if (!CanvasRenderingContext2D.prototype.roundRect) {
    CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
        if (r > w/2) r = w/2;
        if (r > h/2) r = h/2;
        this.moveTo(x + r, y);
        this.arcTo(x + w, y, x + w, y + h, r);
        this.arcTo(x + w, y + h, x, y + h, r);
        this.arcTo(x, y + h, x, y, r);
        this.arcTo(x, y, x + w, y, r);
        return this;
    };
}

// 动画循环
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 更新角度
    pedalAngle += 0.08;
    wheelAngle += 0.05;
    
    // 移动自行车（来回）
    bikeX += direction * 1.2;
    if (bikeX > 150 || bikeX < 30) {
        direction *= -1;
        // 转身时反向踩踏
    }
    
    // 绘制
    drawPelicanBike(bikeX, pedalAngle, wheelAngle);
    
    // 速度线
    ctx.strokeStyle = 'rgba(144, 164, 174, 0.4)';
    ctx.lineWidth = 1.5;
    ctx.setLineDash([4, 6]);
    for (let i = 0; i < 5; i++) {
        const y = 280 + i * 12;
        const xOff = (i * 7 + bikeX * 0.1) % 30;
        ctx.beginPath();
        ctx.moveTo(20 + xOff, y);
        ctx.lineTo(70 + xOff, y);
        ctx.stroke();
    }
    ctx.setLineDash([]);
    
    // 太阳
    const sunX = 340;
    const sunY = 55;
    const grad = ctx.createRadialGradient(sunX, sunY, 5, sunX, sunY, 30);
    grad.addColorStop(0, '#ffd54f');
    grad.addColorStop(1, 'rgba(255, 213, 79, 0.3)');
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(sunX, sunY, 30, 0, Math.PI * 2);
    ctx.fill();
    ctx.fillStyle = '#ffd54f';
    ctx.beginPath();
    ctx.arc(sunX, sunY, 22, 0, Math.PI * 2);
    ctx.fill();
    // 太阳光线
    ctx.strokeStyle = 'rgba(255, 213, 79, 0.6)';
    ctx.lineWidth = 3;
    for (let i = 0; i < 8; i++) {
        const a = i * Math.PI / 4 + pedalAngle * 0.02;
        ctx.beginPath();
        ctx.moveTo(sunX + Math.cos(a) * 28, sunY + Math.sin(a) * 28);
        ctx.lineTo(sunX + Math.cos(a) * 38, sunY + Math.sin(a) * 38);
        ctx.stroke();
    }
    
    // 云朵
    ctx.fillStyle = 'rgba(255,255,255,0.8)';
    const cloudX = (bikeX * 0.2 + 40) % 380;
    ctx.beginPath();
    ctx.arc(cloudX, 60, 18, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(cloudX + 25, 50, 24, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(cloudX + 50, 60, 18, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(cloudX + 22, 72, 14, 0, Math.PI * 2);
    ctx.fill();
    
    requestAnimationFrame(animate);
}

// 启动动画
animate();