家好！ 欢迎来到本教程，我们将深入了解使用 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 气泡效果。

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

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

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

说明：

======

1.1 环境：python3.8+matplotlib3.2+微软编辑器vscode。

1.2 圆、sin和cos的关系：属于基础性知识，在数学可视化教学和计算机编程中广泛被使用。

1.3 看起来简单，但是提高思维，很重要。

1.4 熟悉matplotlib作图和python编程基础性知识，讲解清楚，小白秒懂，适合普通人、数学爱好者和编程爱好者。

2 效果：

3 代码讲解：

========

3.1 第1步：导入模块

import numpy as np
import matplotlib.pyplot as plt
import matplotlib.animation as animation

3.2 第2步：初始化画布和参数

#整体风格设置：深黑色背景颜色，这种设置比较方便
#注意应该放在最前面
plt.style.use('dark_background')
#画布定义和大小设置：8,4=800和400
fig, ax= plt.subplots(1,1,figsize=(8,4))
plt.axis('equal')  # 保证长宽相等

#x和y坐标刻度范围
ax.set_xlim([0, 2*np.pi])
ax.set_ylim([-2.5, 2.5])

#sin和cos的x和y点坐标
x = np.linspace(0, 2*np.pi, 100)
ys = np.sin(x)
yc = np.cos(x)

3.3 第3步：圆和sin、cos的线条与圆点设置

#3-1 直线
#过圆心的水平x线
ax.plot(3*x - 3, 0*ys, linewidth=1, color='pink')

#圆心垂直y线
ax.plot(0*x, 2.5*ys, linewidth=1, color='pink')

#运动三个点的起始垂直y线
ax.plot(0*x+1, 2.5*ys, linewidth=1, color='blue')

#右侧终点垂直y线
ax.plot(0*x+7.3, 2.5*ys, linewidth=1, color='blue')

#3-2 圆
#初始化圆的线条
ax.plot(np.cos(x), np.sin(x), linewidth=1,color='white')
#运动后的圆的再次覆盖的圆线
circleLine, = ax.plot([], [],linewidth=4,color='green',label='circle')
#运动的圆的圆点
circleDot, = ax.plot([], [], 'o', color='yellow')

#3-3 sin
#初始化sin的线条
ax.plot(x + 1, np.sin(x), linewidth=1,color='yellow')

#sin运动后再次覆盖的线条
sineLine, = ax.plot([], [], linewidth=4,color='red', label='sin')
#sin的运动的圆点
sineDot, = ax.plot([], [], 'o', color='blue')

#3-4 cos
#初始化cos的线条
ax.plot(x + 1, np.cos(x)-1, linewidth=1,color='green')
#cos运动后再次覆盖的线条
cosLine, = ax.plot([], [], linewidth=4,color='pink',label='cos')
#cos的运动的圆点
cosDot, = ax.plot([], [], 'o', color='red')

3.4 第4步：动画anim设置

def moveAnim(i):
    # sin anim
    sineLine.set_data(x[:i] + 1,ys[:i])
    sineDot.set_data(x[i] + 1, ys[i])

    # cos anim
    cosLine.set_data(x[:i] + 1,yc[:i]-1)
    cosDot.set_data(x[i] + 1, yc[i]-1)

    # circle anim
    circleLine.set_data(np.cos(x[:i]), np.sin(x[:i]))
    circleDot.set_data(np.cos(x[i]), np.sin(x[i]))

3.5 第5步：动画挂起和plt基本设置

#动画挂起
anim = animation.FuncAnimation(fig, moveAnim, frames=len(x), interval=50)

#标题名
plt.title('circle-sin-cos-moving')
#plt.grid()  #显示网格
#保存
#HTML(anim.to_html5_video())
#anim.save('sine-py-effect.mp4', writer='ffmpeg')

plt.legend() #图例默认展示
plt.show() #展示

4 附注：matplotlib版本查询

====================

4.1 代码：

import matplotlib
a=matplotlib.__version__

print(a)

4.2 效果图：

5 画圆的意义：

==========

5.1 钟表的设置。

5.2 傅里叶级数变换。

5.3 数学教学的可视化。

5.4 等等。

满满的干货，请收藏。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>canvas-3圆的绘制</title>

</head>

<body>

<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>

<script type="text/javascript">

var canvas1 = document.querySelector("#canvas1") // 1.找到画布对象

var ctx = canvas1.getContext("2d") // 2.上下文对象（画笔）

// (圆心x：300, 圆心y：300, 半径r：100, 开始角度：0 , 结束角度：360度, 默认为false（可不写）是顺时针，true为逆时针)

ctx.arc(300, 300, 100, 0, 2*Math.PI)

ctx.stroke()

</script>

</body>

</html>