HTML5/Canvas美丽的随机游走线条

Random line movement

html5, canvas

《使用js把svg图形转成png图像》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

;
(function(main) {

main(this, document, Vector2);
    //Vector2 library included from github https://github.com/SeanFree/Vector2
})(function(window, document, vec2) {
    var canvas, ctx, gui,
        dimensions, center, mouseFollower,
        mouse, mouseOver,
        particles, props, tick;

var Particle = (function() {
        function Particle(startPos) {
            this.counter = 0;
            this.size = props.particleSize;
            this.velocity = new vec2();
            this.position = new vec2(startPos.x, startPos.y);
        }
        return Particle;
    })();

Particle.prototype.update = function() {
        this.checkBounds();
        this.position.add(this.velocity);
        this.velocity.addRandom(0.2);
        this.counter++;
    };

Particle.prototype.checkBounds = function() {
        if (this.position.x > dimensions.x || this.position.y > dimensions.y || this.position.x < 0 || this.position.y < 0) {
            this.remove = true;
        }
    };

Particle.prototype.color = function() {
        var hue = this.counter / 2 - 60 + props.startHue;
        return 'hsl(' + hue.toString() + ',' + props.saturation.toString() + '%,' + props.luminosity.toString() + '%)';
    };

function resize() {
        canvas.width = dimensions.x = center.x = window.innerWidth;
        canvas.height = dimensions.y = center.y = window.innerHeight;

center.divideScalar(2);

mouse.x = mouseFollower.x = center.x;
        mouse.y = mouseFollower.y = center.y;
    }

function createUI() {
        gui = new dat.GUI();
        var f1 = gui.addFolder('Background'),
            f2 = gui.addFolder('Particles');
        f1.open();
        f1.add(props, 'fillAlpha').min(0).max(1).step(0.005);
        f1.add(props, 'clear');

f2.open();
        f2.add(props, 'startHue').min(0).max(360);
        f2.add(props, 'saturation').min(0).max(100);
        f2.add(props, 'luminosity').min(0).max(100);
        f2.add(props, 'particleSize').min(0.15).max(5).step(0.05);
        f2.add(props, 'reset');
    }

function init() {
        canvas = document.querySelector('#canvas');
        ctx = canvas.getContext('2d');

dimensions = new vec2();
        center = new vec2();
        mouse = new vec2();
        mouseFollower = new vec2();

mouseOver = false;
        particles = [];

props = {
            fillAlpha: 0.005,
            fillColor: [0, 0, 0],
            maxParticles: 400,
            particleSize: 0.75,
            startHue: 280,
            saturation: 50,
            luminosity: 50,
            clear: resize,
            reset: function() {
                particles = [];
                resize();
            }
        };
        tick = 0;

createUI();
        resize();
        render();
    }

window.onload = init;

window.onresize = resize;

window.onmousemove = mouseHandler;

window.onmouseout = mouseHandler;

window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();

});

编译

CSS

HTML

Random line movement

html5, canvas

编辑器支持Emmet

快捷键

Random line movement

html5, canvas

HTML5 Canvas光线游走的蜂巢（六边形网格）动画

HTML5 Canvas炫酷的线条分形动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：