前言:
现时姐妹们对“粒子群算法数组”都比较注重,我们都想要了解一些“粒子群算法数组”的相关资讯。那么小编也在网络上收集了一些有关“粒子群算法数组””的相关资讯,希望咱们能喜欢,咱们快快来学习一下吧!大家好! 欢迎来到本教程,我们将深入了解使用 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怎么设置动态气泡