HTML5 Canvas线条相交动画

Intersecting Lines（相交线），可用来作为数学类、科学工程类网站的背景动画。

html5, math, template

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4151
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = window.innerWidth,
    cx = cw / 2;
var ch = canvas.height = window.innerHeight,
    cy = ch / 2;

ctx.fillStyle = "#000";
var linesNum = 16;
var linesRy = [];
var requestId = null;

this.draw = function() {
        ctx.strokeStyle = "#ccc";
        ctx.beginPath();
        ctx.moveTo(this.a.x, this.a.y);
        ctx.lineTo(this.b.x, this.b.y);
        ctx.stroke();
    }

this.update = function() {
        if (this.flag == "v") {
            this.a.x += this.va;
            this.b.x += this.vb;
        } else if (flag == "h") {
            this.a.y += this.va;
            this.b.y += this.vb;
        }

this.edges();
    }

this.edges = function() {
        if (this.flag == "v") {
            if (this.a.x < 0 || this.a.x > cw) {
                this.va *= -1;
            }
            if (this.b.x < 0 || this.b.x > cw) {
                this.vb *= -1;
            }
        } else if (flag == "h") {
            if (this.a.y < 0 || this.a.y > ch) {
                this.va *= -1;
            }
            if (this.b.y < 0 || this.b.y > ch) {
                this.vb *= -1;
            }
        }
    }

}

for (var i = 0; i < linesNum; i++) {
    var flag = i % 2 == 0 ? "h" : "v";
    var l = new Line(flag);
    linesRy.push(l);
}

function Draw() {
    requestId = window.requestAnimationFrame(Draw);
    ctx.clearRect(0, 0, cw, ch);

for (var i = 0; i < linesRy.length; i++) {
        var l = linesRy[i];
        l.draw();
        l.update();
    }
    for (var i = 0; i < linesRy.length; i++) {
        var l = linesRy[i];
        for (var j = i + 1; j < linesRy.length; j++) {
            var l1 = linesRy[j]
            Intersect2lines(l, l1);
        }
    }
}

function Init() {
    linesRy.length = 0;
    for (var i = 0; i < linesNum; i++) {
        var flag = i % 2 == 0 ? "h" : "v";
        var l = new Line(flag);
        linesRy.push(l);
    }

if (requestId) {
        window.cancelAnimationFrame(requestId);
        requestId = null;
    }

cw = canvas.width = window.innerWidth,
        cx = cw / 2;
    ch = canvas.height = window.innerHeight,
        cy = ch / 2;

Draw();
};

setTimeout(function() {
    Init();

addEventListener('resize', Init, false);
}, 15);

function markPoint(p) {
    ctx.beginPath();
    ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
    ctx.fill();
}

function randomIntFromInterval(mn, mx) {
    return ~~(Math.random() * (mx - mn + 1) + mn);
}

编译

CSS

HTML

Intersecting Lines（相交线），可用来作为数学类、科学工程类网站的背景动画。

html5, math, template

编辑器支持Emmet

快捷键

Intersecting Lines（相交线），可用来作为数学类、科学工程类网站的背景动画。

html5, math, template

HTML5 Canvas圆形相交（交点）动画

HTML5 Canvas三维插值B-样条曲线弹性动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：