怎样使用HTML5Canvas创建动态粒子网格动画

小编给大家分享一下怎样使用HTML5 Canvas创建动态粒子网格动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站专注于集宁企业网站建设,响应式网站,电子商务商城网站建设。集宁网站建设公司,为集宁等地区提供建站服务。全流程按需制作网站，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

添加一个canvas了：

下面是样式：

#canvas{

position: absolute;

display: block;

left:0;

top:0;

background: #0f0f0f;

z-index: -1;

}

上面canvas的z-index: -1的作用是可以放在一些元素的下面当做背景。

为了确保canvas能够充满整个浏览器，所以要将canvas的宽高设置成和浏览器一样：

function getSize(){

w = canvas.width = window.innerWidth;

h = canvas.height = window.innerHeight;

}

上面w和h分别代表浏览器的宽高。

获得了浏览器的宽高，接下来就是在里面画粒子了，这里我们需要提前定义一些粒子的参数：

var opt = {

particleAmount: 50, //粒子个数

defaultSpeed: 1, //粒子运动速度

variantSpeed: 1, //粒子运动速度的变量

particleColor: "rgb(32,245,245)", //粒子的颜色

lineColor:"rgb(32,245,245)", //网格连线的颜色

defaultRadius: 2, //粒子半径

variantRadius: 2, //粒子半径的变量

minDistance: 200 //粒子之间连线的最小距离

};

上面的速度变量和半径变量都是为了保证粒子的大小和速度不是一模一样。

然后我们再创建一个类用来初始化粒子，代码比较长，我都加了注释：

function Partical(){

this.x = Math.random()*w; //粒子的x轴坐标

this.y = Math.random()*h; //粒子的y轴坐标

this.speed = opt.defaultSpeed + opt.variantSpeed*Math.random(); //粒子的运动速度

this.directionAngle = Math.floor(Math.random()*360); //粒子运动的方向

this.color = opt.particleColor ; //粒子的颜色

this.radius = opt.defaultRadius+Math.random()*opt.variantRadius; //粒子的半径大小

this.vector = {

x:this.speed * Math.cos(this.directionAngle), //粒子在x轴的速度

y:this.speed * Math.sin(this.directionAngle) //粒子在y轴的速度

}

this.update = function(){ //粒子的更新函数

this.border(); //判断粒子是否到了边界

this.x += this.vector.x; //粒子下一时刻在x轴的坐标

this.y += this.vector.y; //粒子下一时刻在y轴的坐标

}

this.border = function(){ //判断粒子是都到达边界

if(this.x >= w || this.x<= 0){ //如果到达左右边界，就让x轴的速度变为原来的负数

this.vector.x *= -1;

}

if(this.y >= h || this.y <= 0){ //如果到达上下边界，就让y轴的速度变为原来的负数

this.vector.y *= -1;

}

if(this.x > w){ //下面是改变浏览器窗口大小时的操作，改变窗口大小后有的粒子会被隐藏，让他显示出来即可

this.x = w;

}

if(this.y > h){

this.y = h;

}

if(this.x < 0){

this.x = 0;

}

if(this.y < 0){

this.y = 0;

}

}

this.draw = function(){ //绘制粒子的函数

ctx.beginPath();

ctx.arc(this.x, this.y, this.radius ,0 ,Math.PI * 2);

ctx.closePath();

ctx.fillStyle = this.color;

ctx.fill();

}

}

以上是“怎样使用HTML5 Canvas创建动态粒子网格动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！