基础前端鲁班小技巧具体自定义控件

canvas 实现动态粒子连线

2019-07-12  本文已影响2人  CondorHero
粒子连线.gif

如果经常上网就一定见过一些博客的背景有一些粒子跑来跑去,还可以连线。看着是挺炫酷的。基本上就类似上面的效果。今天终于用代码敲出来了,虽然过程不是太顺利,就是粒子跟随鼠标那个效果,我怎么都想不到实现思路。还好最后死想出来了,用的方法虽然挺笨的。

这个效果一直是我想做的,在我玩 HEXO 搭建个人博客的时候,参考了很多人的网页其中见到效果最多的就是这个,当时就暗暗下决心我的把它给写出来,但那时候我觉得老难了,啥思路没有,毕竟那时候的我知识储备不够,而且当时主要学习理论为主要,实践的东西很少。

现在的我虽然不是很大神,但是可是能用canvas写出来游戏的学生,绝大多数canvas的效果我都是能做出来的,还是很厉害滴。字数够了,开始正文,再讲下去怕被打。。。

使用技术:

真的写完感觉也没啥难得。还是讲讲思路吧!

实现步骤

  1. 首先的会制作粒子,粒子的制作和使用 canvas 写炫彩小球的例子差不多。不会的可以参考上篇文章 Canvas 使用指南和几个套路 里面就有这个粒子,有代码注释的很清楚。

  2. 粒子连线的原理。求直线之间的距离,使用的是数学中求直角三角形斜边的方法。x² + y² = z²,看数学还是很重要的。接下来只需要给定一个特定的值,来比较求得值与特定值的大小,然后根据判断结果,进行连线操作。

  3. 鼠标连线和跟随。这点没人教还是挺难的,想了一个上午,下午才想出来。

(以上废话看不懂没关系,请看源代码注释!自己结合着理解。)


示意图

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas实现背景动态粒子连线</title>
    <style>
        html,body{
            margin:0;
            padding:0;
            width: 100%;
            height:100%;
            /*去掉浏览器默认垂直和水平滑动条*/
            overflow:hidden;
        }
    </style>
</head>
<body>
    <canvas></canvas>
</body>
</html>
<script>
    //得到标签
    var myCanvas = document.querySelector("canvas");
    //设置画布的宽高为浏览器的宽高
    myCanvas.width = document.documentElement.clientWidth;
    myCanvas.height = document.documentElement.clientHeight;
    //得到canvas的上下文
    var ctx = myCanvas.getContext("2d");
    //自适应浏览器的宽高
    window.onresize = function(){
        //设置画布的宽高为浏览器的宽高
        myCanvas.width = document.documentElement.clientWidth;
        myCanvas.height = document.documentElement.clientHeight;
    }
    // particle粒子构造函数
    function Particle(){
        // 随机生成粒子距离原点的x,y距离用dotx和doty来表示
        this.dotx = Math.random() *  myCanvas.width;
        this.doty = Math.random() *  myCanvas.height;
        // 随机生成x,和y方向的运动信号量
        do{
            this.idx = (Math.random() * 2) - 1;
            this.idy = (Math.random() * 2) - 1;
            // 当生成的信号量为零重新生成
        }while(this.idx == 0 && this.idy == 0);
        // 两点之间最大距离的平方
        this.max = 6000;
        // 渲染粒子
        this.render();
        // 粒子放进数组
        dotsArr.push(this);
    }
    // 初始化粒子
    Particle.prototype.render = function(){
        ctx.beginPath();
        ctx.fillRect(this.dotx,this.doty,1,1);
    }
    // 定时器更新粒子的状态
    Particle.prototype.update = function(){
        // 改变每个粒子的x,y值,让粒子运动起来
        this.dotx += this.idx;
        this.doty += this.idy;
        // 碰撞检测,防止粒子运动出浏览器
        if(this.dotx > myCanvas.width || this.dotx < 0){
            this.idx = -this.idx;
        }
        if(this.doty > myCanvas.height || this.doty < 0){
            this.idy = - this.idy;
        }
        // 渲染粒子
        this.render();
        // 鼠标的中心值,当没在窗口移动鼠标,或鼠标移出窗口,鼠标的mouse.mouse_x
        // 为null不进行渲染
        if(mouse.mouse_x != null){
            // 鼠标与各个粒子之间的x和y的距离
            var mousex = this.dotx - mouse.mouse_x;
            var mousey = this.doty - mouse.mouse_y;
            //运用直角三角形公式 x² + y² = z²求出两点距离的平方
            var mousez = mousex * mousex + mousey * mousey;
            // 当粒子距离鼠标在10000~20000之间,向鼠标靠拢
            if(mousez > mouse.max / 2 && mousez < mouse.max){

                this.dotx -= mousex*0.03;
                this.doty -= mousey*0.03;
            }
            // 距离鼠标平方两万以内的全部和鼠标连线
            if(mousez < mouse.max){
                // 调用连线功能
                this.toline(mouse.mouse_x,mouse.mouse_y,mousez);
            }
        }
        // 某一粒子实例与所有粒子距离的判断
        for(let j = 0;j < dotsArr.length;j++){
            // 不等于本身
            if(dotsArr[j] != this){
                // 实例与各个粒子之间的x和y的距离
               var dx = this.dotx - dotsArr[j].dotx;
               var dy = this.doty - dotsArr[j].doty;
               //运用直角三角形公式 x² + y² = z²求出两点距离的平方
               var dz = dx * dx + dy * dy;
                // 距离鼠标平方六千以内的全部和鼠标连线
               if(this.max > dz){
                // 调用连线函数
                    this.toline(dotsArr[j].dotx,dotsArr[j].doty,dz);
               }
            }
        }
    }
    // 连线函数
    Particle.prototype.toline = function(x,y,z){
        // 传来的鼠标与粒子距离平方大于粒子之间的距离的平方
        // 确保能够得到各自的rate
        if(z > this.max){
            var rate = (mouse.max - z) / mouse.max;
        }else{
            var rate = (this.max - z) / this.max;
        }
        // 开始划线
        ctx.beginPath();
        // 线宽
        ctx.lineWidth = rate / 2;
        // 线的颜色
        ctx.strokeStyle = "rgba(0,0,0," + (rate + 0.2) + ")";
        // 线的起点
        ctx.moveTo(this.dotx,this.doty);
        // 线的终点
        ctx.lineTo(x,y);
        // 划线
        ctx.stroke();
    }
    // 定义一个数组存放所有的粒子
    var dotsArr = [];
    // 向浏览器里面放入两百五十个粒子
    for(let i = 0;i < 250;i++){
        // 调用实例
        new Particle();
    }
    // 定时器让粒子动起来
    setInterval(function(){
        // 画布清屏
        ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
        // 更新每个粒子
        for(let i = 0;i < dotsArr.length;i++){
            dotsArr[i].update();
        }  
    },10);
    // 鼠标的位置参数
    var mouse = {"mouse_x":null,"mouse_y":null,"max":20000}
    // 监测鼠标的移动
    document.onmousemove = function(event){
        mouse.mouse_x = event.clientX;
        mouse.mouse_y = event.clientY;
    }
    document.onmouseout = function(event){
        mouse.mouse_x = null;
        mouse.mouse_y = null;
    }
</script>
上一篇下一篇

猜你喜欢

热点阅读