canvas点线连接动画代码-html代码-BFW代码库

canvas点线连接动画代码

代码语言：html

所属分类：动画

代码描述：canvas点线连接动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
#container {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden
}
#nodegarden {
	background-color:#171616
}

</style>
</head>

<body>

    <div id="container"></div>

    <script>
var pixelRatio = window.devicePixelRatio;
var wWidth;
var wHeight;
var wArea;
var nodes = new Array(Math.sqrt(wArea) / 10 | 0);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var $container = document.getElementById("container");
if (pixelRatio !== 1) {
    canvas.style.transform = "scale(" + 1 / pixelRatio + ")";
    canvas.style.transformOrigin = "0 0"
}
canvas.id = "nodegarden";
$container.appendChild(canvas);
init();
render();
window.addEventListener("resize", init);

function init() {
    wWidth = window.innerWidth * pixelRatio;
    wHeight = window.innerHeight * pixelRatio;
    wArea = wWidth * wHeight;
    nodes.length = Math.sqrt(wArea) / 12 | 0;
    canvas.width = wWidth;
    canvas.height = wHeight;
    var a, b;
    for (a = 0, b = nodes.length; a < b; a++) {
        if (nodes[a]) {
            continue
        }
        nodes[a] = {
            x: Math.random() * wWidth,
            y: Math.random() * wHeight,
            vx: Math.random() * 1 - 0.5,
            vy: Math.random() * 1 - 0.5,
            m: Math.random() * 1.5 + 10,
            link: null,
            pos: false
        }
    }
}

function render() {
    var b;
    var a;
    var c;
    var m, o;
    var l, n;
    var d, e, h, k, f;
    requestAnimationFrame(render);
    ctx.clearRect(0, 0, wWidth, wHeight);
    for (d = 0, f = nodes.length - 1; d < f; d++) {
        for (e = d + 1; e < f + 1; e++) {
            h = nodes[d];
            k = nodes[e];
            l = k.x - h.x;
            n = k.y - h.y;
            b = Math.sqrt(Math.pow(l, 2) + Math.pow(n, 2));
            if (b < h.m / 2 + k.m / 2) {
                if (h.m <=.........完整代码请登录后点击上方下载按钮下载查看