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

时间：2017-04-08

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

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()函数来绘制粒子。下面是这个时候的效果：

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

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变量，当两个粒子之间的连线小于这个值的时候，我们就给他们之间画上线。

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

我们现在知道每个粒子的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);
    }

共3页:

2/3

上一篇：HTML5 Canvas玩转酷炫大波浪进度图效果实例（附demo） 下一篇：H5新属性audio音频和video视频的控制详解（推荐）

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

相关文章

最新文章