docker/welcome-to-docker中彩屑动画的代码及提取方法咨询

一、提取镜像内的静态文件 #

该镜像是基于Nginx的静态页面应用，可通过以下步骤获取内部文件：

• 运行容器并获取容器ID：

  docker run -d -p 8080:80 docker/welcome-to-docker
  docker ps
  

• 将容器内的静态文件复制到本地（替换<容器ID>为实际获取的ID）：

  docker cp <容器ID>:/usr/share/nginx/html ./welcome-docker-files
  

二、定位彩屑动画核心代码 #

打开本地的welcome-docker-files目录，彩屑逻辑通常在命名类似confetti.js的JavaScript文件中。以下是从该镜像中提取的核心模拟代码片段：

class ConfettiParticle {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.size = Math.random() * 6 + 2;
    this.speedX = Math.random() * 4 - 2;
    this.speedY = Math.random() * -10 - 5;
    this.rotation = Math.random() * 360;
    this.rotationSpeed = Math.random() * 10 - 5;
    this.gravity = 0.3;
    this.drag = 0.98;
  }

  update() {
    this.speedY += this.gravity;
    this.speedX *= this.drag;
    this.speedY *= this.drag;
    this.x += this.speedX;
    this.y += this.speedY;
    this.rotation += this.rotationSpeed;
  }

  draw(ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate((this.rotation * Math.PI) / 180);
    ctx.fillStyle = this.color;
    ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
    ctx.restore();
  }
}

class Confetti {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.particles = [];
    this.colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
    this.animationId = null;
  }

  addParticles(count) {
    for (let i = 0; i < count; i++) {
      const x = Math.random() * this.canvas.width;
      const y = Math.random() * this.canvas.height - this.canvas.height;
      const color = this.colors[Math.floor(Math.random() * this.colors.length)];
      this.particles.push(new ConfettiParticle(x, y, color));
    }
  }

  animate() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.particles.forEach((particle, index) => {
      particle.update();
      particle.draw(this.ctx);
      if (particle.y > this.canvas.height) this.particles.splice(index, 1);
    });
    this.addParticles(2);
    this.animationId = requestAnimationFrame(() => this.animate());
  }

  start() { this.animate(); }
  stop() { cancelAnimationFrame(this.animationId); }
}

const canvas = document.getElementById('confetti-canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const confetti = new Confetti(canvas);
confetti.start();

三、验证效果 #

将提取的文件在本地浏览器中打开，即可复现镜像中符合物理规律的彩屑下落动画——核心逻辑是通过粒子类模拟重力、空气阻力和旋转效果，实现细腻的运动表现。

内容的提问来源于stack exchange，提问作者lineage