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

使用canvas塑造贰个璀璨的粒子背景,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文件就能够了

利用canvas打造一个炫酷的粒子背景,canvas炫酷。参考英特网海大学神,具体来源不太记得,如有侵害权益,联系博主删除~

利用
canvas构建一个璀璨的粒子背景,当然还也可能有生龙活虎对库都得以的,此番我们手写这一个背景,主…

发表评论

电子邮件地址不会被公开。 必填项已用*标注