jquery.chain

Bundle of lines use HTML5 canvas

by Stepan Mas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="Chain">
    <div class="dot-1 Chain-dot"></div>
    <div class="dot-2 Chain-dot"></div>
    <div class="dot-3 Chain-dot"></div>
</div>


<button class="start">Start</button>
<button class="stop">Stop</button>
<button class="clear">clear</button>

<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="jquery.chain.js"></script>
<script>
    $(
            function()
            {
                var chain = new $.Chain();

                chain.render();


                setInterval(
                        function ()
                        {
                            $('.dot-1').animate(
                                    {
                                        left: Math.random() * 300,
                                        top : Math.random() * 300
                                    }
                            );
                            $('.dot-2').animate(
                                    {
                                        left: Math.random() * 300,
                                        top : Math.random() * 300
                                    }
                            );
                            $('.dot-3').animate(
                                    {
                                        left: Math.random() * 300,
                                        top : Math.random() * 300
                                    }
                            )
                        }, 500
                );


                $('.start').click(
                        function()
                        {
                            chain.start();
                        }
                );

                $('.stop').click(
                        function ()
                        {
                            chain.stop();
                        }
                );

                $('.clear').click(
     ...

CSS

body{
            background :#ccc;
        }

        canvas{
            position :relative;
            z-index  :10;
        }

        .Chain{
            border     :1px solid;
            width      :600px;
            height     :300px;
            background :#fff;
        }

        .dot-1, .dot-2, .dot-3{
            position   :absolute;
            background :cornflowerblue;
            width      :10px;
            height     :10px;
        }

        .dot-1:hover, .dot-2:hover{
            background :red;
        }

        .dot-1{
            left :10px;
            top  :10px;
        }

        .dot-2{
            left :300px;
            top  :200px;
        }

        .dot-3{
            left :400px;
            top  :200px;
        }

JavaScript

!function ()
{
    "use strict";
    
    $.Chain = function (options)
    {
        var cache = {
            canvas: null,
            dots  : []
        };
        
        this._stop = false;
        
        window.requestAnimFrame = (function ()
        {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback)
                {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();
        
        
        options = $.extend(
            {
                line: {
                    color: 'blue',
                    width: 1
                },
                el  : '.Chain',
                dot : '.Chain-dot'
            },
            options
        );
        
        var getPosition = function (el)
        {
            return [el.position().left, el.position().top];
        };
        
        
        this.draw = function ()
        {
            var $canvas = $(cache.canvas),
                canvas  = $canvas[0],
                context = canvas.getContext('2d');
    
            cache.context = context;
            
            if (!cache.dots.length)
                return null;
            
            canvas.height = $canvas.height();
            canvas.width  = $canvas.width();
            
            context.beginPath();
            context.lineWidth = options.line.width;
            context.moveTo.apply(context, getPosition(cache.dots[0]));
            
            $.each(
                cache.dots,
                function (i, dot)
                {
                    if (!i) return;
                    
                    context.lineTo.apply(context, getPosition(dot));
                }
            );
            
            context.strokeStyle =...