html怎么加粒子特效,使用Canvas给DOM元素添加粒子效果

让我们来看看如何将的自由度与HTML元素结合起来，使Web页面在视觉上有更好的效果。具体地说，我们将创建一个基于HTML-to-particle的效果，但同样的技术也可以用于实现很多类型的效果。

在开始之前，可以通过Repo获取源代码。

创建初始的元素

首先，让我们创建一个HTML元素。这里创建了一个带有简单样式效果的按钮，事实上它可以是任何一个HTML元素。

建议使用Chrome、Firefox或Edge等现代浏览器查看这些Demo效果。

但是，如何让canvas“看到”这个元素，以便使用canvas来 操作每个像素 呢？为了实现这一点，需要对HTML元素进行快照 —— 就像“打印屏幕”一样，但只对希望在canvas中操作的特定元素(比如说按钮)进行快照。

创建canvas版本的元素

尽管浏览器到目前还无法实现这一点，但庆幸的是允许我们通过JavaScript来操作它，较为出名的html2canvas库就可以。我们所要做的就是加载这个库，然后调用html2canvas(element)，它将返回一个Promise以及一个canvas版本的元素。是不是很棒。

上面这个示例，我们有一个HTML版本和Canvas版本的按钮。我们可以使用Canvas版本作为我们的“屏幕快照”，并将其作为信息的来涨势，例如特定像素位置的颜色。

从Canvas中获取数据

为此，我们创建一个新函数来获取Canvas中特定位置的像素信息。我们也不需要显示从Canvas中得到的颜色数据，因为我们显示原始的HTML元素。

function getColorAtPoint(e) {

// 获取鼠标点击位置的坐标

let x = e.offsetX;

let y = e.offsetY;

// 获取该位置上颜色数据

let rgbaColorArr = ctx.getImageData(x, y, 1, 1).data;

// rgbaColorArr相关的处理

}

现在我们需要使用这些信息创建一个Canvas的粒子效果。

创建Canvas粒子效果

我们还没有使用Canvas来放置粒子，因为我们想要保留html2canvas的canvas用于访问颜色信息。接下来创建粒子效果的函数。

var particleCanvas, particleCtx;

function createParticleCanvas() {

// 创建用于粒子效果的Canvas

particleCanvas = document.createElement("canvas");

particleCtx = particleCanvas.getContext("2d");

// Canvas的大小

particleCanvas.width = window.innerWidth;

particleCanvas.height = window.innerHeight;

// Canvas的位置

particleCanvas.style.position = "absolute";

particleCanvas.style.top = "0";

particleCanvas.style.left = "0";

// 设置Canvas在元素的上面

particleCanvas.style.zIndex = "1001";

// 确保它下面的其他元素是可点击的

particleCanvas.style.pointerEvents = "none";

// 把Canvas添加到页面中

document.body.appendChild(particleCanvas);

}

获取坐标数据

我们还需要从本地坐标系统得到颜色相关的数据 —— 不仅仅是按钮的左上角，而且全局坐标的位置(相对整个Web页面)，这样做是为了在Canvas的正确地方创建粒子。

我们可以这样做：

btn.addEventListener("click", e => {

// 获取颜色数据

let localX = e.offsetX;

let localY = e.offsetY;

let rgbaColorArr = ctx.getImageData(localX, localY, 1, 1).data;

// 根据window获取按钮的位置

let bcr = btn.getBoundingClientRect();

let globalX = bcr.left + localX;

let globalY = bcr.top + localY;

// 使用window的位置获取颜色数据，创建一个粒子

createParticleAtPoint(globalX, globalY, rgbaColorArr);

});

创建一个粒子原型

我们还可以创建一个基本粒子，是一个带有参数的绘图函数：

/* 圆形爆炸的粒子效果 */

var ExplodingParticle = function() {

// 设置想要的粒子动画的时长

this.animationDuration = 1000; // in ms

// 设置粒子的速度

this.speed = {

x: -5 + Math.random() * 10,

y: -5 + Math.random() * 10

};

// 粒子大小

this.radius = 5 + Math.random() * 5;

// 为粒子设定一个最大的生存时间

this.life = 30 + Math.random() * 10;

this.remainingLife = this.life;

// 这个函数稍后将会调用动画相关的逻辑

this.draw = ctx => {

let p = this;

if(this.remainingLife > 0

&& this.radius > 0) {

// 在当前位置绘制一个圆

ctx.beginPath();

ctx.arc(p.startX, p.startY, p.radius, 0, Math.PI * 2);

ctx.fillStyle = "rgba(" + this.rgbArray[0] + ',' + this.rgbArray[1] + ',' + this.rgbArray[2] + ", 1)";

ctx.fill();

// 更新粒子的位置和生命

p.remainingLife--;

p.radius -= 0.25;

p.startX += p.speed.x;

p.startY += p.speed.y;

}

}

}

创建一个粒子工厂

我们还需要一个基于一些坐标和颜色信息的函数，这个函数主要用来创建这些粒子，确保我们将它们添加到创建的粒子数组中：

var particles = [];

function createParticleAtPoint(x, y, colorData) {

let particle = new ExplodingParticle();

particle.rgbArray = colorData;

particle.startX = x;

particle.startY = y;

particle.startTime = Date.now();

particles.push(particle);

}

添加动画逻辑

我们还需要一种方法，让创建出来的粒子动起来。

function update() {

// 清除旧粒子

if(typeof particleCtx !== "undefined") {

particleCtx.clearRect(0, 0, window.innerWidth, window.innerHeight);

}

// 在新位置绘制所有粒子

for(let i = 0; i < particles.length; i++) {

particles[i].draw(particleCtx);

// 如果最后一个粒子完成动画，清除旧的粒子

if(i === particles.length - 1) {

let percent = (Date.now() - particles[i].startTime) / particles.animationDuration;

if(percent > 1) {

particles = [];

}

}

}

// 动画性能

window.requestAnimationFrame(update);

}

window.requestAnimationFrame(update);

把这几个部分放在一起，现在可以基于HTML元素创建粒子。当我们点击它时，可以看到效果。

如果我们想要点击整个按钮会爆炸，而不仅是一个像素。我们只需要修改我们的点击函数。

let reductionFactor = 17;

btn.addEventListener("click", e => {

// 获取按钮的颜色数据

let width = btn.offsetWidth;

let height = btn.offsetHeight

let colorData = ctx.getImageData(0, 0, width, height).data;

// 跟踪重复了多少次(为了减少创建的粒子总数)

let count = 0;

// 遍历按钮的每个位置并创建一个粒子

for(let localX = 0; localX < width; localX++) {

for(let localY = 0; localY < height; localY++) {

if(count % reductionFactor === 0) {

let index = (localY * width + localX) * 4;

let rgbaColorArr = colorData.slice(index, index + 4);

let bcr = btn.getBoundingClientRect();

let globalX = bcr.left + localX;

let globalY = bcr.top + localY;

createParticleAtPoint(globalX, globalY, rgbaColorArr);

}

count++;

}

}

});

现在Web方面的限制相对较少，因为我们知道我们可以添加像canvas来创建更多的自由性。

通过使用边缘检测来判断元素是否超出容器边界(即隐藏在视图之外)，并在元素超出边界时创建粒子。这样可以有更多的创意。

这样的一个过程可以写一篇文章来阐述，因为在Web浏览器中对元素的定位是复杂的，但是我写了一个叫做Disintegration的小插件，其中包括对这类事情的处理。

Disintegrate插件

Disintegrate是开源的，它处理了一些Web浏览器兼容这个效果的代码。它还允许多个元素在同一个页面上应用此效果，如果需要，可以忽略指定的颜色，以及处理过程中不同重要时刻的事件。

我们只需要在按钮上声明data-distype="contains"，将使我们的元素超出容器边界时，粒子将被创建。比如下面这个Demo效果。

使用Disintegrate的另一个效果。允许使用self-contained的粒子动画，比如我们之前所做的按钮效果。通过动画容器和主元素本身，可以创建更有趣的粒子效果。

然而，这种方法确实有其局限性(Disintegrate也是如此)。例如，它只能在IE11运行，因此在此之前缺乏ponter-events事件的支持。由于html2canvas的限制，Disintegration也不支持我们想要的所有DOM元素。我发现最受限的是CSS的transform和clip-path。

如果你想要安装Disintegrate，可以使用npm install disintegrate进行安装。或者可以在disintegrate.init()之前手动引用html2canvas.js和disintegrate.js。

Disintegrate是一个新写的插件，还有一些需要进行改进。如果你愿意，可以给Disintegrate和html2canvas提供相关的建议。

如何在你的项目中使用这个功能，或者说使用它们来扩展Web的功能，有较好的建议或想法的话，欢迎在下面的评论中与我们一起分享。