龙空技术网

使用 HTML5 Canvas 和 JavaScript 开发动画气泡:分步教程

启辰8 68

前言:

现时姐妹们对“粒子群算法数组”都比较注重,我们都想要了解一些“粒子群算法数组”的相关资讯。那么小编也在网络上收集了一些有关“粒子群算法数组””的相关资讯,希望咱们能喜欢,咱们快快来学习一下吧!

大家好! 欢迎来到本教程,我们将深入了解使用 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, yconst 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 speedx = 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 气泡效果。

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

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

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

标签: #粒子群算法数组 #浅蓝色html代码 #html气泡 #html气泡图 #html怎么设置动态气泡