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

利用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;
    }

JS代碼有點多，大家再用的時候封裝好，直接引入JS文件就可以了

參考網上大神，具體來源不太記得，如有侵權，聯系博主刪除~

fakin前端博客，設計路上的前端日記