<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	
<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];

Vvveb.Components.extend("_base", "html/link", {
 nodes: ["a"],
 name: "Link",
 properties: [{
 name: "Url",
 key: "href",
 htmlAttr: "href",
 inputtype: LinkInput
 }, {
 name: "Target",
 key: "target",
 htmlAttr: "target",
 inputtype: TextInput
 }]
});

var TextInput = $.extend({}, Input, {
 events: {
 "keyup": ['onChange', 'input'],
	 },
	setValue: function(value) {
		$('input', this.element).val(value);
	},
	
	init: function(data) {
		return this.render("textinput", data);
	},
 }
);

<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>

anvas是HTML5中的一个重要特性，它是一个可以使用JavaScript绘制图形的HTML元素。本文将分为以下几个部分：

1. 准备工作
2. 绘制圆形
3. 圆形跟随鼠标移动
4. 圆形随时间逐渐消失

接下来，我们将逐一详细讲解。

1. 准备工作

在开始之前，我们需要准备一些基本的工作。首先，我们需要在HTML文件中添加一个Canvas元素：

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

然后，在JavaScript文件中获取Canvas元素和Canvas上下文：

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

2. 绘制圆形

现在，我们将开始绘制圆形。我们将使用Canvas的绘图API来绘制圆形。首先，我们需要定义圆形的颜色和大小：

const footprintColor = '#000000';
const footprintSize = 10;

然后，我们需要编写一个函数来绘制圆形：

function drawFootprint(x, y) {
  ctx.beginPath();
  ctx.fillStyle = footprintColor;
  ctx.arc(x, y, footprintSize, 0, Math.PI * 2);
  ctx.fill();
}

在这个函数中，我们使用Canvas的 beginPath() 方法来开始一条新的路径。然后，我们使用 fillStyle 属性来设置圆形的颜色。接下来，我们使用 arc() 方法来绘制圆形。最后，我们使用 fill() 方法来填充路径。

现在，我们已经可以在Canvas上绘制圆形了。我们可以在Canvas上，添加一个鼠标移动事件监听器，当鼠标移动时，我们将在Canvas上绘制一个圆形。

canvas.addEventListener('mousemove', (event) => {
  const x = event.clientX;
  const y = event.clientY;
  drawFootprint(x, y);
});

在这个事件监听器中，我们使用 clientX 和 clientY 属性来获取鼠标的坐标。然后，我们调用 drawFootprint() 函数来绘制圆形。

3. 圆形跟随鼠标移动

现在，我们已经可以在Canvas上绘制圆形了。但是，我们希望圆形能够跟随鼠标移动。我们可以使用Canvas的 clearRect() 方法来清除之前绘制的圆形，然后再绘制新的圆形。

canvas.addEventListener('mousemove', (event) => {
  const x = event.clientX;
  const y = event.clientY;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawFootprint(x, y);
});

在这个事件监听器中，我们使用 clearRect() 方法来清除Canvas上之前绘制的圆形。然后，我们调用 drawFootprint() 函数来绘制新的圆形。

4. 圆形随时间逐渐消失

现在，我们已经可以在Canvas上，绘制跟随鼠标移动的圆形了。但是，我们希望圆形能够随着时间的推移逐渐消失。我们可以使用 setInterval() 函数来定时清除Canvas上的圆形。

let footprints = [];

function drawFootprint(x, y) {
  const footprint = {
    x,
    y,
    alpha: 1
  };
  footprints.push(footprint);
}

function drawFootprints() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  footprints.forEach((footprint) => {
    ctx.beginPath();
    ctx.fillStyle = footprintColor;
    ctx.arc(footprint.x, footprint.y, footprintSize, 0, Math.PI * 2);
    ctx.globalAlpha = footprint.alpha;
    ctx.fill();
    footprint.alpha -= 0.01;
  });
  footprints = footprints.filter((footprint) => footprint.alpha > 0);
}

canvas.addEventListener('mousemove', (event) => {
  const x = event.clientX;
  const y = event.clientY;
  drawFootprint(x, y);
});

setInterval(() => {
  drawFootprints();
}, 10);

在这个代码中，我们将每个圆形存储在一个数组中。每次绘制圆形时，我们将新的圆形添加到数组中。然后，我们使用 setInterval() 函数定时绘制所有圆形，并将透明度逐渐减小。最后，我们过滤掉透明度为0的圆形。

这样，我们就实现了一个拖影的例子。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。

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

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

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

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