详解使用HTML5 Canvas创建动态粒子网格动画


Posted in HTML / CSS onDecember 14, 2016

最近看到一个粒子网格动画挺炫的,自己也就做了一个,当背景挺不错的。CSDN不能上传超过2M的图片,所以就简单截了一个静态图片:

下面就开始说怎么实现这个效果吧:

详解使用HTML5 Canvas创建动态粒子网格动画

首先当然是添加一个canvas了:

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

下面是样式:

<style>
    #canvas{
        position: absolute;
        display: block;
        left:0;
        top:0;
        background: #0f0f0f;
        z-index: -1;
     }
</style>

上面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();
    }
}

1、每个粒子的初始速度和角度是随机生成的,粒子的颜色通过相关的设置选项来确定。

2、this.vector用来存储粒子的移动方向:如果this.vector.x为1,则粒子向右运动;如果是-1,则粒子向左移动。同样,如果this.vector.y为负,则粒子向上移动,如果为正,则粒子向下移动。

this.update用来更新每个粒子下一个位置的坐标。首先,进行边缘检测;如果粒子的移动超出了canvas的尺寸,则将方向向量乘以-1产生反向的运动方向。

3、窗口缩放可能会引起粒子超出边界,如此一来边缘检测函数就捕捉不到了,所以就需要一系列的if语句来检测这种情况,将粒子的位置重置为当前canvas的边界。

4、最后一步,将这些点绘制到画布上。

粒子的类已经写好了,下面就把他绘制出来:

function init(){
   getSize();
   for(let i = 0;i<opt.particleAmount; i++){
        particle.push(new Partical());
   }
   loop();
}

上面初始化了opt.particleAmount个粒子对象,初始化了对象但是并没有绘制出来,下面是loop函数:

function loop(){
    ctx.clearRect(0,0,w,h);
    for(let i = 0;i<particle.length; i++){
        particle[i].update();
        particle[i].draw();
    }
    window.requestAnimationFrame(loop);
}

loop()函数每执行一次,都会清除canvas上的内容,然后通过粒子对象的update()函数重新计算粒子的坐标,最后通过粒子对象的draw()函数来绘制粒子。下面是这个时候的效果:

详解使用HTML5 Canvas创建动态粒子网格动画

但是在浏览器窗口大小改变以后有些粒子就会消失不见,这个时候需要添加一个事件来监听浏览器大小是否改变:

window.addEventListener("resize",function(){
    winResize()
},false);

然后需要来写winResize()函数,这里需要注意一下,浏览器改变的时候触发resize事件的次数会特别频繁,稍微移动一下浏览器的边缘就是触发几十次resize事件,那么也就会重新计算几十次浏览器大小,比较消耗性能,这个大家可以测试一下,这里就直接说解决方法吧,其实我们要的只是浏览器改变后的最后的大小,至于中间到底改变了多少次和我们没有关系,所以我们可以在浏览器窗口改变的时候延缓200毫秒后执行计算浏览器大小的事件,如果在这期间一直触发resize事件,那就一直往后延缓200毫秒,听起来挺复杂,其实代码很简单:

var particle = [], w,h;     //粒子数组,浏览器宽高
var delay = 200,tid;        //延缓执行事件和setTimeout事件引用
function winResize(){
    clearTimeout(tid);
    tid = setTimeout(function(){
        getSize();          //获取浏览器宽高,在文章最上面有介绍
    },delay)
}

这样所有的粒子动画都完成了,接下来就可以在粒子之间画线了,我们上面定义的opt对象里面有一个minDistance变量,当两个粒子之间的连线小于这个值的时候,我们就给他们之间画上线。

那么如何计算两个粒子之间的距离呢,大家可以回想一下初中数学第一课,勾股定理,直角三角形两个直角边的平方和等于第三条变的平方,看下面:

详解使用HTML5 Canvas创建动态粒子网格动画

我们现在知道每个粒子的x轴和y轴的坐标,那么我们就可以计算出两个点之间的距离了,写一个函数,传入两个点,如下:

function getDistance(point1,point2){
        return Math.sqrt(Math.pow(point1.x-point2.x,2) + Math.pow(point1.y - point2.y ,2));
    }

现在我们可以计算出两个点的距离,那么我们就计算出所有每个粒子同其他所有粒子的距离,来确定它们之间是否需要连线,当然如果所有粒子的颜色深度都一模一样,那就有点丑了,所以我们这里可以根据两个粒子之间的距离来决定连线的透明度,两个粒子距离越近,越不透明,距离越远,越透明,超过一定距离就不显示了。

function linePoint(point,hub){
    for(let i = 0;i<hub.length;i++){
        let distance = getDistance(point,hub[i]);
        let opacity = 1 -distance/opt.minDistance;
        if(opacity > 0){
            ctx.lineWidth = 0.5;
            ctx.strokeStyle = "rgba("+line[0]+","+line[1]+","+line[2]+","+opacity+")";
            ctx.beginPath();
            ctx.moveTo(point.x,point.y);
            ctx.lineTo(hub[i].x,hub[i].y);
            ctx.closePath();
            ctx.stroke();
        }
    }
}

上面传入的两个参数分别是一个点和整个点的数组,let opacity = 1 -distance/opt.minDistance;用于判断连线之间的透明度同时也判断了距离,距离大于opt.minDistance时,opacity为负,下面判断时就过滤掉了,上面的颜色用到了正则表达式,需要先解析最上面opt对象里给出的颜色,然后再加上透明度,这段代码如下:

var line = opt.lineColor.match(/\d+/g);

最后在loop()函数里面不断循环计算距离就可以了,在loop()中加入代码后如下:

function loop(){
        ctx.clearRect(0,0,w,h);
        for(let i = 0;i<particle.length; i++){
            particle[i].update();
            particle[i].draw();
        }
        for(let i = 0;i<particle.length; i++){   //添加的是这个循环
            linePoint(particle[i],particle)
        }
        window.requestAnimationFrame(loop);
    }

需要指出的是:如果添加过多的点和/或过多的连接距离(连接距离会创建过多的线条),动画也会扛不住。当视口变窄时最好降低粒子的运动速度:粒子的尺寸越小,在愈加狭窄空间内的移动速度貌似会越快。

显示整段代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas粒子动画</title>
    <style>
        #canvas{
            position: absolute;
            display: block;
            left:0;
            top:0;
            background: #0f0f0f;
            z-index: -1;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var opt = {
        particleAmount: 50,     //粒子个数
        defaultSpeed: 1,        //粒子运动速度
        variantSpeed: 1,        //粒子运动速度的变量
        particleColor: "rgb(32,245,245)",       //粒子的颜色
        lineColor:"rgb(32,245,245)",            //网格连线的颜色
        defaultRadius: 2,           //粒子半径
        variantRadius: 2,           //粒子半径的变量
        minDistance: 200            //粒子之间连线的最小距离
    };
    var line = opt.lineColor.match(/\d+/g);
    console.log(line);
    var particle = [], w,h;
    var delay = 200,tid;
    init();
    window.addEventListener("resize",function(){
        winResize()
    },false);

    function winResize(){
        clearTimeout(tid);
        tid = setTimeout(function(){
            getSize();
        },delay)
    }

    function init(){
        getSize();
        for(let i = 0;i<opt.particleAmount; i++){
            particle.push(new Partical());
        }
        loop();
    }

    function loop(){
        ctx.clearRect(0,0,w,h);
        for(let i = 0;i<particle.length; i++){
            particle[i].update();
            particle[i].draw();
        }
        for(let i = 0;i<particle.length; i++){
            linePoint(particle[i],particle)
        }
        window.requestAnimationFrame(loop);
    }

    function linePoint(point,hub){
        for(let i = 0;i<hub.length;i++){
            let distance = getDistance(point,hub[i]);
            let opacity = 1 -distance/opt.minDistance;
            if(opacity > 0){
                ctx.lineWidth = 0.5;
                ctx.strokeStyle = "rgba("+line[0]+","+line[1]+","+line[2]+","+opacity+")";
                ctx.beginPath();
                ctx.moveTo(point.x,point.y);
                ctx.lineTo(hub[i].x,hub[i].y);
                ctx.closePath();
                ctx.stroke();
            }
        }
    }

    function getDistance(point1,point2){
        return Math.sqrt(Math.pow(point1.x-point2.x,2) + Math.pow(point1.y - point2.y ,2));
    }

    function getSize(){
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
    }
    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();
        }
    }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 #HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 #HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 #HTML / CSS
HTML5标签大全
Nov 23 #HTML / CSS
HTML5拖放效果的实现代码
Nov 17 #HTML / CSS
html5 div布局与table布局详解
Nov 16 #HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 #HTML / CSS
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
php post换行的方法
2020/02/03 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
python显示天气预报
2014/03/02 Python
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
利用python批量检查网站的可用性
2016/09/09 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python交互式图形编程实例(二)
2017/11/17 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
英语感恩演讲稿
2014/01/14 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
村级四风对照检查材料
2014/08/24 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
2014年招商工作总结
2014/11/22 职场文书
业务员管理制度范本
2015/08/06 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python