家好！ 欢迎来到本教程，我们将深入了解使用 HTML 画布和 JavaScript 在代码中创建有趣的气泡的世界。 最好的部分？ 我们将只使用一点 HTML 和所有 JavaScript，而不是 CSS 来实现所有这一切。

揭示概念

今天，我们要掌握以下几个概念：

使用画布上下文的 arc 方法创建圆。

利用 requestAnimationFrame 函数实现平滑的圆形动画。

利用 JavaScript 类的强大功能来创建多个圆圈，而无需重复代码。

向我们的圆圈添加描边样式和填充样式以获得 3D 气泡效果。

你可以跟着我一起看，或者如果你想看源代码，可以使用最终的codepen

入门

首先，我们需要一个 HTML5 Canvas 元素。 Canvas 是创建形状、图像和图形的强大元素。 这就是气泡将产生的地方。 让我们来设置一下 -

<canvas id="canvas"></canvas>

为了使用画布做任何有意义的事情，我们需要访问它的上下文。 Context 提供了在画布上渲染对象和绘制形状的接口。

让我们访问画布及其上下文。

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

我们将设置画布以使用整个窗口的高度和宽度 -

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

让我们通过添加一些 css 为画布提供一个漂亮的舒缓浅蓝色背景。 这是我们要使用的唯一 CSS。 如果您愿意，也可以使用 JavaScript 来完成此操作。

#canvas {
  background: #00b4ff;
}

是时候创造泡泡了！

让我们进入有趣的部分。 我们将通过单击画布来创建气泡。 为了实现这一点，我们首先创建一个点击事件处理程序：

canvas.addEventListener('click', handleDrawCircle);

由于我们需要知道在画布上单击的位置，因此我们将在句柄 DrawCircle 函数中跟踪它并使用事件的坐标 -

//We are adding x and y here because we will need it later.
let x, y
const handleDrawCircle = (event) => {
  x = event.pageX;
  y = event.pageY;

// Draw a bubble!
  drawCircle(x, y);
};

用圆弧法画圆

为了创建圆圈，我们将利用画布上下文中可用的 arc 方法。 Arc 方法接受 x 和 y - 圆心、半径、起始角和结束角，对于我们来说，这将是 0 和 2* Math.PI，因为我们正在创建一个完整的圆。

const drawCircle = (x, y) => {
  context.beginPath();
  context.arc(x, y, 50, 0, 2 * Math.PI);

  context.strokeStyle = 'white';
  context.stroke();
};

使用 requestAnimationFrame 方法移动圆圈

现在我们有了圆圈，让我们让它们移动，因为……

GIF

请记住，当我们创建圆时，我们使用了 arc 方法，它接受 x 和 y 坐标 - 圆的中心。 如果我们快速移动圆的 x 和 y 坐标，就会给人一种圆在移动的印象。 让我们试试吧！

//Define a speed by which to increment to the x and y coordinates

const dx = Math.random() * 3;
const dy = Math.random() * 7;//Increment the center of the circle with this speed
x = x + dx;
y = y - dy;

我们可以将其移至函数内 -

let x, y;

const move = () => {
  const dx = Math.random() * 3;
  const dy = Math.random() * 7;  x = x + dx;
  y = y - dy;
};

为了让我们的圆圈无缝移动，我们将创建一个动画函数并使用浏览器的 requestAnimationFrame 方法来创建一个移动的圆圈。

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  move();
    drawCircle(x,y);  requestAnimationFrame(animate);
};//Don't forget to call animate at the bottom 
animate();

创建粒子：引入粒子类

现在我们已经创建了一个圆圈，是时候创建多个圆圈了！

但在我们创建多个圆圈之前，让我们准备一下我们的代码。为了避免重复我们的代码，我们将使用类并引入 Particle 类。 粒子是我们动态艺术作品和动画的构建块。 每个气泡都是一个粒子，具有自己的位置、大小、运动和颜色属性。 让我们定义一个 Particle 类来封装这些属性：

class Particle {
  constructor(x = 0, y = 0) {}

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }  move() {
    // Implementing particle movement
    // ...
  }
}

让我们将一些已设置的常量移至 Particle 类 -

class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
  }

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }  move() {
    // Implementing particle movement
    // ...
  }
}

draw 方法将负责在画布上渲染粒子。 我们已经在drawCircle中实现了这个功能，所以让我们将它移动到我们的类中并将变量更新为类变量

class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
    this.color = 'white';
  }

  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    context.strokeStyle = this.color;
    context.stroke();    context.fillStyle = this.color;
    context.fill();
  }  move() {}
}

同样，让我们在类中移动 move 函数 -

move() {
    this.x = this.x + this.dx;
    this.y = this.y - this.dy;
}

现在，我们需要确保在事件处理程序中调用 Particle 类。

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  const particle = new Particle(x, y);
};canvas.addEventListener('click', handleDrawCircle);

由于我们需要在 animate 函数中访问该粒子，以便调用其 move 方法，因此我们将该粒子存储在一个名为 molecularArray 的数组中。 当创建大量粒子时，这个数组也会很有帮助。 这是反映这一点的更新代码 -

const particleArray = [];

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;  const particle = new Particle(x, y);
  particleArray.push(particle);
};canvas.addEventListener('click', handleDrawCircle);

记得也要更新动画功能 -

此时，您将在屏幕上看到这个粒子 -

惊人的！ 现在，到了有趣的部分！ 让我们创建很多圆圈并设计它们的样式，使它们看起来像气泡。

为了创建大量气泡，我们将使用 for 循环创建粒子并将它们添加到我们在此处创建的粒子数组中。

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  for (let i = 0; i < 50; i++) {
    const particle = new Particle(x, y);
    particleArray.push(particle);
  }
};canvas.addEventListener('click', handleDrawCircle);

在动画函数中，我们将通过清除画布并在新位置重新绘制粒子来不断更新画布。 这会给人一种圆圈在移动的错觉。

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  particleArray.forEach((particle) => {
    particle?.move();
    particle?.draw();
  });  requestAnimationFrame(animate);
};animate();

现在我们有了移动的气泡，是时候给它们添加颜色，使它们看起来像气泡了！

我们将通过向气泡添加渐变填充来实现此目的。 这可以使用 context.createRadialGradient 方法来完成。

const gradient = context.createRadialGradient(
  this.x,
  this.y,
  1,
  this.x + 0.5,
  this.y + 0.5,
  this.radius
);

gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.95, '#e7feff');context.fillStyle = gradient;

总结

恭喜！ 您刚刚仅使用 HTML Canvas 和 JavaScript 创建了一些超级有趣的东西。 您已经学习了如何使用 arc 方法、利用 requestAnimationFrame、利用 JavaScript 类的强大功能以及使用渐变设计气泡以实现 3D 气泡效果。

请随意尝试颜色、速度和大小，使您的动画真正独一无二。

请随意尝试颜色、速度和大小，使您的动画真正独一无二。

我希望您在学习本教程时能像我在创建它时一样获得乐趣。 现在，轮到你进行实验了。 我很想看看你是否尝试过这个以及你创造了什么。 与我分享您的代码链接，我很乐意查看。

tml：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>玻璃效果网站</title>
        <link href="../css/20240302.css" rel="stylesheet">
    </head>
    <body>
        <main>
            <section class="glass">
                <div class="dashboard">
                    <div class="user">
                        <img src="./image/20240302/photo1.png" alt="">
                        <h3>
                            Demo
                        </h3>
                        <p>Pro Member</p>
                    </div>
                    <div class="links">
                        <div class="link">
                            <img src="./image/20240302/Streams.png" alt="" />
                            <h2>Streams</h2>
                        </div>
                        <div class="link">
                            <img src="./image/20240302/Games.png" alt="" />
                            <h2>Games</h2>
                        </div>
                        <div class="link">
                            <img src="./image/20240302/news.png" alt="" />
                            <h2>New</h2>
                        </div>
                        <div class="link">
                            <img src="./image/20240302/Library.png" alt="" />
                            <h2>Library</h2>
                        </div>
                    </div>
                    <div class="pro">
                        <h2>Join pro for free games.</h2>
                        <img src="./image/20240302/show_128.png" alt="" />
                    </div>
                </div>
                <div class="games">
                    <div class="status">
                        <h1>Active Games</h1>
                        <input type="text" />
                    </div>
                    <div class="cards">
                        <div class="card">
                            <img src="./image/20240302/20240302_1.png" alt="" />
                            <div class="card-info">
                                <h2>恶 魔 之 魂</h2>
                                <p>PS5 Version</p>
                                <div class="progress"></div>
                            </div>
                            <h2 class="percentage">60%</h2>
                        </div>
                        <div class="card">
                            <img src="./image/20240302/20240302_2.png" alt="" />
                            <div class="card-info">
                                <h2>无 路 之 旅</h2>
                                <p>PS5 Version</p>
                                <div class="progress"></div>
                            </div>
                            <h2 class="percentage">60%</h2>
                        </div>
                        <div class="card">
                            <img src="./image/20240302/20240302_3.png" alt="" />
                            <div class="card-info">
                                <h2>麻布仔大冒险</h2>
                                <p>PS5 Version</p>
                                <div class="progress"></div>
                            </div>
                            <h2 class="percentage">60%</h2>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <div class="circle1"></div>
        <div class="circle2"></div>
    </body>
</html>

Css：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1{
    color: #426696;
    font-weight: 600;
    font-size: 3rem;
    opacity: 0.8;
}

h2, 
p{
    color: #658ec6;
    font-weight: 500;
    opacity: 0.8;
}

h3{
    color: #426696;
    font-weight: 600;
    opacity: 0.8;
}

main {
    font-family: "Poppins", sans-serif;
    min-height: 100vh;
    background: linear-gradient(to right top, #ffcb06, #ec9c07);
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass{
    background: white;
    min-height: 80vh;
    width: 60%;
    background: linear-gradient(
        to right bottom, 
        rgba(255, 255, 255, 0.7), 
        rgba(255, 255, 255, 0.3)
    );
    border-radius: 2rem;
    z-index: 2;
    backdrop-filter: blur(2rem);
    display: flex;
}

.circle1,.circle2{
    background: white;
    background: linear-gradient(
        to right bottom, 
        rgba(255, 255, 255, 0.8), 
        rgba(255, 255, 255, 0.3)
    );
    height: 20rem;
    width: 20rem;
    position: absolute;
    border-radius: 50%;
}

.circle1{
    top: 5%;
    right: 15%;
}

.circle2{
    bottom: 5%;
    left: 10%;
}

.dashboard{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    background: linear-gradient(
        to right bottom, 
        rgba(255, 255, 255, 0.7), 
        rgba(255, 255, 255, 0.3)
    );
    border-radius: 2rem;
}

.link{
    display: flex;
    margin: 2rem 0rem;
    padding: 1rem 5rem;
    align-items: center;
}

.link h2{
    padding: 0rem 1rem;
}

.games{
    flex: 2;
}

.pro{
    background: linear-gradient(to right top, #ffcb06, #ec9c07);
    border-radius: 2rem;
    color: white;
    padding: 1rem;
    position: relative;
}

.pro img{
    position: absolute;
    top: 5%;
    right: 8%;
}

.pro h2{
    width: 40%;
    color: white;
    font-weight: 600;
}

.status{
    margin-bottom: 3rem;

}

.status input{
    background: linear-gradient(
        to right bottom, 
        rgba(255, 255, 255, 0.7), 
        rgba(255, 255, 255, 0.3)
    );
    border: none;
    width: 50%;
    padding: 0.5rem;
    border-radius: 2rem;
}

.games{
    margin: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.card{
    display: flex;
    background: linear-gradient(
        to left top, 
        rgba(255, 255, 255, 0.8), 
        rgba(255, 255, 255, 0.5)
    );
    border-radius: 1rem;
    margin: 2rem 0rem;
    padding: 2rem;
    box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.212);
    justify-content: space-between;
}

.card-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.progress{
    background: linear-gradient(to right top, #ffcb06, #ec9c07);
    width: 100%;
    height: 25%;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

.progress::after {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(236, 236, 236);
    position: absolute;
    left: 60%;
}

.percentage{
    font-weight: bold;
    background: linear-gradient(to right top, #ffcb06, #ec9c07);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}