HTML5网状结构节点动画

Html

Css

html,body {
	margin:0;
	background-color:#25003a;
	overflow:hidden;
}
canvas {
	position:relative;
	top:0;
	bottom:0;
	width:100%;
	height:100%;
	background-color:#25003a;
	overflow:hidden;
}

(function() {

var canvas, ctx, circ, nodes, mouse, SENSITIVITY, SIBLINGS_LIMIT, DENSITY, NODES_QTY, ANCHOR_LENGTH, MOUSE_RADIUS;

// how close next node must be to activate connection (in px)
    // shorter distance == better connection (line width)
    SENSITIVITY = 100;
    // note that siblings limit is not 'accurate' as the node can actually have more connections than this value that's because the node accepts sibling nodes with no regard to their current connections this is acceptable because potential fix would not result in significant visual difference 
    // more siblings == bigger node
    SIBLINGS_LIMIT = 10;
    // default node margin
    DENSITY = 50;
    // total number of nodes used (incremented after creation)
    NODES_QTY = 0;
    // avoid nodes spreading
    ANCHOR_LENGTH = 20;
    // highlight radius
    MOUSE_RADIUS = 200;

circ = 2 * Math.PI;
    nodes = [];

canvas = document.querySelector('canvas');
    resizeWindow();
    mouse = {
        x: canvas.width / 2,
        y: canvas.height / 2
    };
    ctx = canvas.getContext('2d');
    if (!ctx) {
        alert("Ooops! Your browser does not support canvas :'(");
    }

function Node(x, y) {
        this.anchorX = x;
        this.anchorY = y;
        this.x = Math.random() * (x - (x - ANCHOR_LENGTH)) + (x - ANCHOR_LENGTH);
        this.y = Math.random() * (y - (y - ANCHOR_LENGTH)) + (y - ANCHOR_LENGTH);
        this.vx = Math.random() * 2 - 1;
        this.vy = Math.random() * 2 - 1;
        this.energy = Math.random() * 100;
        this.radius = Math.random();
        this.siblings = [];
        this.brightness = 0;
    }

Node.prototype.drawNode = function() {
        var color = "rgba(255, 0, 0, " + this.brightness + ")";
        ctx.beginPath();
        ctx.arc(this.x, this.y, 2 * this.radius + 2 * this.siblings.length / SIBLINGS_LIMIT, 0, circ);
        ctx.fillStyle = color;
        ctx.fill();
    };

Node.prototype.drawConnections = function() {
        for (var i = 0; i < this.siblings.length; i++) {
            var color = "rgba(255, 0, 0, " + this.brightness + ")";
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(this.siblings[i].x, this.siblings[i].y);
            ctx.lineWidth = 1 - calcDistance(this, this.siblings[i]) / SENSITIVITY;
            ctx.strokeStyle = color;
            ctx.stroke();
        }
    };

Node.prototype.moveNode = function() {
        this.energy -= 2;
        if (this.energy < 1) {
            this.energy = Math.random() * 100;
            if (this.x - this.anchorX < -ANCHOR_LENGTH) {
                this.vx = Math.random() * 2;
            } else if (this.x - this.anchorX > ANCHOR_LENGTH) {
                this.vx = Math.random() * -2;
            } else {
                this.vx = Math.random() * 4 - 2;
            }
            if (this.y - this.anchorY < -ANCHOR_LENGTH) {
                this.vy = Math.random() * 2;
            } else if (this.y - this.anchorY > ANCHOR_LENGTH) {
                this.vy = Math.random() * -2;
            } else {
                this.vy = Math.random() * 4 - 2;
            }
        }
        this.x += this.vx * this.energy / 100;
        this.y += this.vy * this.energy / 100;
    };

function calcDistance(node1, node2) {
        return Math.sqrt(Math.pow(node1.x - node2.x, 2) + (Math.pow(node1.y - node2.y, 2)));
    }

function initHandlers() {
        document.addEventListener('resize', resizeWindow, false);
        canvas.addEventListener('mousemove', mousemoveHandler, false);
    }

function resizeWindow() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

function mousemoveHandler(e) {
        mouse.x = e.clientX;
        mouse.y = e.clientY;
    }

initHandlers();
    initNodes();
    redrawScene();

})();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

HTML5网状结构节点动画



代码描述：HTML5鼠标悬停网状结构节点动画特效

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

小乐67

相关代码

HTML5网状结构节点动画

最新