首页 > > 网页制作 > css >

利用canvas打造一个炫酷的粒子背景

2018-06-24 01:49:43来源：未知阅读 ()

利用canvas打造一个炫酷的粒子背景，当然还有一些库都可以的，这次我们手写这个背景，主要的还是JS，canvas只是画布本身没有什么效果的，只是接口，还是需要JS去完成的。
canvas标签说明：
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
canvas 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持canvas标记。
这是html5的一个新标签，换言之就是IE678直接GG，所以主要还是在现代浏览器上所使用，不过现在用IE678的人估计也很少。
那怎么做呢？
首先我们需要在页面中写入canvas标签(加点内联样式吧，比较懒 --)

<canvas id="canvas" style="position:absolute;width:100%;height:100%;background:#000;"></canvas>

接下来就是重点JS了，话不多说直接上代码

window.requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    var can = document.getElementById("canvas");
    var cxt = can.getContext("2d");
    can.width = 1920;
    can.height = 950;
    cxt.lineWidth = 0.3;
    //初始链接线条显示位置
    var mousePosition = {
        x: 30 * can.width / 100,
        y: 30 * can.height / 100
    }
    //圆形粒子对象参数
    var dots = {
        n: 500,//圆形粒子个数
        distance: 50,//圆形粒子之间的距离
        d_radius: 100,//粒子距离鼠标点的距离
        array: []//保存n个圆形粒子对象
    }
    //创建随即颜色值
    function colorValue(min) {
        return Math.floor(Math.random() * 255 + min);
    }
    function createColorStyle(r, g, b) {
        return "rgba(" + r + "," + g + "," + b + ", 1)";
    }
    //混合两个圆形粒子的颜色
    function mixConnect(c1, r1, c2, r2) {//圆的颜色 半径
        return (c1 * r1 + c2 * r2) / (r1 + r2);
    };
    //生成线条的颜色
    function lineColor(dot1, dot2) {//获取具体的圆的颜色再计算
        var color1 = dot1.color,
            color2 = dot2.color;
        var r = mixConnect(color1.r, dot1.radius, color2.r, dot2.radius);
        var g = mixConnect(color1.g, dot1.radius, color2.g, dot2.radius);
        var b = mixConnect(color1.b, dot1.radius, color2.b, dot2.radius);
        return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
    }
    //生成圆形粒子的颜色对象
    function Color(min) {
        min = min || 0;
        this.r = colorValue(min);
        this.g = colorValue(min);
        this.b = colorValue(min);
        this.style = createColorStyle(this.r, this.g, this.b);
    }
    //创建圆形粒子对象
    function Dot() {
        //圆形粒子随机圆心坐标点
        this.x = Math.random() * can.width;
        this.y = Math.random() * can.height;
        //x y 方向运动的速度值
        this.vx = -0.5 + Math.random();
        this.vy = -0.5 + Math.random();

        this.radius = Math.random() * 5;
        //this.color = "#ff3333";
        this.color = new Color();
    }
    //绘制出圆形粒子
    Dot.prototype.draw = function () {
        cxt.beginPath();
        cxt.fillStyle = this.color.style;
        cxt.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        cxt.fill();
    }
    //添加圆形粒子
    function createCircle() {
        for (var i = 0; i < dots.n; i++) {
            dots.array.push(new Dot());
        }
    }
    //绘制出圆形粒子
    function drawDots() {
        for (var i = 0; i < dots.n; i++) {
            var dot = dots.array[i];
            dot.draw();
        }
    }

    //drawDots();
    //移动
    function moveDots() {
        for (var i = 0; i < dots.n; i++) {
            var dot = dots.array[i];
            //当圆形粒子对象碰壁的时候就反弹回来
            if (dot.y < 0 || dot.y > can.height) {
                dot.vx = dot.vx;
                dot.vy = -dot.vy;
            } else if (dot.x < 0 || dot.x > can.width) {
                dot.vx = -dot.vx;
                dot.vy = dot.vy;
            }
            //给圆形粒子圆心坐标加上速度值移动圆形粒子
            dot.x += dot.vx;
            dot.y += dot.vy;
        }
    }
    //链接粒子对象
    function connectDots() {
        for (var i = 0; i < dots.n; i++) {
            for (var j = 0; j < dots.n; j++) {
                iDot = dots.array[i];
                jDot = dots.array[j];
                if ((iDot.x - jDot.x) < dots.distance && (iDot.y - jDot.y) < dots.distance && (iDot.x - jDot.x) > -dots.distance && (iDot.y - jDot.y) > -dots.distance) {
                    if ((iDot.x - mousePosition.x) < dots.d_radius && (iDot.y - mousePosition.y) < dots.d_radius && (iDot.x - mousePosition.x) > -dots.d_radius && (iDot.y - mousePosition.y) > -dots.d_radius) {
                        cxt.beginPath();
                        //cxt.strokeStyle = "yellow";
                        cxt.strokeStyle = lineColor(iDot, jDot);
                        cxt.moveTo(iDot.x, iDot.y);
                        cxt.lineTo(jDot.x, jDot.y);
                        cxt.closePath();
                        cxt.stroke();
                    }

                }
            }
        }
    }
    createCircle();
    //让圆形粒子不断的移动
    function animateDots() {
        cxt.clearRect(0, 0, can.width, can.height);
        moveDots();
        connectDots()
        drawDots();
        requestAnimFrame(animateDots);
    }
    animateDots();

    can.onmousemove = function (ev) {
        var ev = ev || window.event;
        mousePosition.x = ev.pageX;
        mousePosition.y = ev.pageY;
    }
    can.onmouseout = function () {
        mousePosition.x = can.width / 2;
        mousePosition.y = can.height / 2;
    }