CANVAS 一层层的交错线条编织动画

Canvas crossing lines 类似竹席编织动画。

CANVAS

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Line = function() {
    function Line(orientation) {
        _classCallCheck(this, Line);

this.color = getRandomColor();
        this.orientation = orientation;
        this.speed = Math.random() * 5 + 1;

if (this.orientation === 'vertical') {
            this.startPosition = {
                'x': Math.random() * window.innerWidth,
                'y': 0
            };
            this.currentPosition = {
                'x': this.startPosition.x,
                'y': 0
            };
        } else {
            this.startPosition = {
                'x': 0,
                'y': Math.random() * window.innerHeight
            };
            this.currentPosition = {
                'x': 0,
                'y': this.startPosition.y
            };
        }
    }

Line.prototype.update = function update() {
        if (this.currentPosition.y > window.innerHeight || this.currentPosition.x > window.innerWidth) {
            return;
        }

if (this.orientation === 'vertical') {
            this.currentPosition.y += this.speed;
        } else {
            this.currentPosition.x += this.speed;
        }
    };

return Line;
}();

var Experience = function() {
    function Experience(container) {
        _classCallCheck(this, Experience);

console.clear();

this.canvas = document.createElement('canvas');
        container.appendChild(this.canvas);
        this.context = this.canvas.getContext('2d');

this.lines = [];
        this.orientations = ['horizontal', 'vertical'];

var fps = 120;
        this.fpsInterval = 1000 / fps;
        this.then = Date.now();

this.resize();
        this.bind();
        this.loop();
    }

Experience.prototype.bind = function bind() {
        window.addEventListener('resize', this.resize.bind(this), false);
    };

Experience.prototype.render = function render() {
        var randomIndex = Math.floor(Math.random() * 2);
        var orientation = this.orientations[randomIndex];
        var line = new Line(orientation);
        this.lines.push(line);

for (var _iterator = this.lines, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
            var _ref;

if (_isArray) {
                if (_i >= _iterator.length) break;
                _ref = _iterator[_i++];
            } else {
                _i = _iterator.next();
                if (_i.done) break;
                _ref = _i.value;
            }

var _line = _ref;

_line.update();
            this.context.beginPath();
            this.context.moveTo(_line.startPosition.x, _line.startPosition.y);
            this.context.lineTo(_line.currentPosition.x, _line.currentPosition.y);
            this.context.lineWidth = 10;
            this.context.strokeStyle = _line.color;
            this.context.stroke();
            this.context.closePath();
        }
    };

Experience.prototype.loop = function loop() {
        this.raf = window.requestAnimationFrame(this.loop.bind(this));

var now = Date.now();
        var delta = now - this.then;

if (delta > this.fpsInterval) {
            //this.context.clearRect( 0, 0, this.canvas.width, this.canvas.height )
            this.render();
            this.then = now;
        }
    };

Experience.prototype.resize = function resize() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.center = {
            'x': this.canvas.width / 2,
            'y': this.canvas.height / 2
        };

this.reset();
    };

Experience.prototype.reset = function reset() {
        window.cancelAnimationFrame(this.raf);
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.loop();
    };

return Experience;
}();

var getRandomColor = function getRandomColor() {
    var value = Math.floor(Math.random() * 255);
    return '#' + value.toString(16) + value.toString(16) + value.toString(16);
};

var container = document.getElementById('canvas');
var experience = new Experience(container);

编译

CSS

HTML

Canvas crossing lines 类似竹席编织动画。

CANVAS

编辑器支持Emmet

快捷键

Canvas crossing lines 类似竹席编织动画。

CANVAS

CANVAS 酷炫的点线网状动画

HTML5 CANVAS 泡沫粒子浮起和线条波动起伏动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：