SOURCE

console 命令行工具 X clear

                    
>
console
// Opts

var accuracy = 5 // The lower the more accurate but slows down pc
var total = accuracy * 200

canvas = document.getElementById('main');
ctx = canvas.getContext('2d')

int = 0;

create_canvas = function(canvas_id, url) {
    var t = this;
    this.canvas_name = document.getElementById(canvas_id);
    this.canvas_ctx = this.canvas_name.getContext('2d');
    this.url = url;
    this.canvas_image = new Image();
    this.canvas_image.src = this.url + '?' + new Date().getTime();
    this.canvas_image.setAttribute('crossOrigin', '');
    this.pixel_data = new Array();
    this.canvas_image.onload = function() {
        console.log(int)
        int++;
        if (int == 4) {
            $('.l').fadeOut(100);
            setTimeout(function() {
                $('.bar').fadeIn(200);
            }, 100)

        }

        t.canvas_ctx.drawImage(t.canvas_image, 0, 0, t.canvas_ctx.canvas.width, t.canvas_ctx.canvas.height); // Change
        get_image_data(t.canvas_ctx, t.pixel_data);
    }
    this.animate_to_image = function() {

        if (this.pixel_data.length == 0) {
            setTimeout(function() {
                t.animate_to_image();

            }, 500);
        }

        for (i in pixels) {
            pixels[i].resetPixel();
        }

        for (i in t.pixel_data) {
            if (pixels[i]) {
                pixels[i].x = t.pixel_data[i].x;
                pixels[i].y = t.pixel_data[i].y;
                pixels[i].r = t.pixel_data[i].r;
                pixels[i].g = t.pixel_data[i].g;
                pixels[i].b = t.pixel_data[i].b;
                pixels[i].a = t.pixel_data[i].a;
                pixels[i].size = t.pixel_data[i].size;
            }
        }

        animate(pixels);
    }
}

var def = new create_canvas('def', '/uploads/161101/morph1.png');
var statistics = new create_canvas('statistics', '/uploads/161101/morph2.png');
var security = new create_canvas('security', '/uploads/161101/morph3.png');
var notifications = new create_canvas('notifications', '/uploads/161101/morph4.png');
var users = new create_canvas('users', '/uploads/161101/morph5.png');

def.animate_to_image();

function get_image_data(obj, arr) {
    for (var x = 0; x < obj.canvas.width; x += accuracy) {
        for (var y = 0; y < obj.canvas.height; y += accuracy) {
            var pix = obj.getImageData(x, y, 1, 1).data;
            var r = pix[0];
            var g = pix[1];
            var b = pix[2];
            var a = pix[3]
            var pixel_data = {
                    x: x,
                    y: y,
                    r: r,
                    g: g,
                    b: b,
                    a: a,
                    size: 2
                }
                // console.log(pixel_data);
            if (pixel_data.r != 0 && pixel_data.g != 0 && pixel_data.b != 0) {
                arr.push(pixel_data);
            }
        }
    }
}

// Create pixel
var pixel = function() {
    this.from_x = ctx.canvas.width / 2;
    this.from_y = ctx.canvas.width / 2;
    this.from_r = Math.floor(Math.random() * 255);
    this.from_g = Math.floor(Math.random() * 255);
    this.from_b = Math.floor(Math.random() * 255);
    this.x = 0;
    this.y = 0;
    this.size = 4;
    this.r = Math.floor(Math.random() * 255);
    this.g = Math.floor(Math.random() * 255);
    this.b = Math.floor(Math.random() * 255);
    this.resetPixel = function() {
        this.x = ctx.canvas.width / 2;
        this.y = ctx.canvas.height / 2;
        this.r = 0;
        this.g = 0;
        this.b = 0;
        this.a = 0;
        this.size = 0;
    }
}

// Create pixel array
var pixels = [];
for (var i = 0; i < total; i++) {
    pixels.push(new pixel())
}

// Animate pixels
function animate(obj) {
    if (obj) {
        obj.sort(function() {
            return 0.5 - Math.random()
        });
        for (var i in obj) {
            TweenLite.fromTo(obj[i], 1.78, {
                r: obj[i].from_r,
                g: obj[i].from_g,
                b: obj[i].from_b,
                a: obj[i].from_a,
                x: obj[i].from_x,
                y: obj[i].from_y,
                //ease: Elastic.easeOut.config(1.2, 0.3)
            }, {
                x: obj[i].x,
                y: obj[i].y,
                r: obj[i].r,
                g: obj[i].g,
                a: obj[i].a,
                b: obj[i].b,
                ease: Elastic.easeOut.config(1.2, .35),
                onUpdate: drawImage,
                onUpdateParams: [obj[i], i],
                delay: .0002 * i
            });
        }
    }

}


// Draw
function drawImage(obj, index) {

    if (index == 0) {
        //ctx.clearRect(0, 0, 500, 500);
    }
    ctx.beginPath();
    ctx.arc(obj.x, obj.y, obj.size, 0, 2 * Math.PI, false);
    ctx.shadowColor = 'rgba(' + Math.floor(obj.r) + ',' + Math.floor(obj.g) + ',' + Math.floor(obj.b) + ',' + Math.floor(obj.a) + ')';
    //ctx.shadowBlur = 20;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.fillStyle = 'rgba(' + Math.floor(obj.r) + ',' + Math.floor(obj.g) + ',' + Math.floor(obj.b) + ',' + Math.floor(obj.a) + ')';
    ctx.lineWidth = 2;
    ctx.fill();
    obj.from_x = obj.x;
    obj.from_y = obj.y;
    obj.from_r = obj.r;
    obj.from_g = obj.g;
    obj.from_b = obj.b;
    obj.from_a = obj.a;

}


$('.bar_item').mouseenter(function() {
    ctx.clearRect(0, 0, 500, 500);
    var t = $(this).data('canvas');
    var c = $(this).data('color')
    eval(t).animate_to_image();
    TweenLite.to('.overlay', 1, {
        backgroundColor: c,
        opacity: 1,
        backgroundPosition: Math.random() * 600 + 100 + "px " + Math.random() * 600 + 100 + "px",
        ease: Power3.easeOut
    });
    TweenLite.fromTo('.buy', .14, {
        right: '-20px',
        opacity: 1
    }, {
        right: '-100px',
        opacity: 0
    })
    setTimeout(function() {
        TweenLite.fromTo('.buy', .14, {
            right: '-100px',
            opacity: 0
        }, {
            right: '-20px',
            opacity: 1
        })
    }, 140)
})

$('.bar_item').mouseout(function() {
    // def.animate_to_image();
})
<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<div class='overlay'></div>
<div class='c'>
    <div class='i'>
        <canvas height='350' id='main' width='350'></canvas>
        <canvas height='350' id='def' width='350'></canvas>
        <canvas height='350' id='statistics' width='350'></canvas>
        <canvas height='350' id='security' width='350'></canvas>
        <canvas height='350' id='notifications' width='350'></canvas>
        <canvas height='350' id='users' width='350'></canvas>
        <div class='buy'>
            Buy Now
        </div>
        <div class='l'>
            loading...
        </div>
        <div class='bar'>
            <div class='bar_item' data-canvas='statistics' data-color='#E58471'>
                My Teddy Bear
                <span>Super cute teddy</span>
            </div>
            <div class='bar_item' data-canvas='security' data-color='#F4E1B0'>
                My Dinosaur Bear
                <span>Baby Dinosaur Teddy</span>
            </div>
            <div class='bar_item' data-canvas='notifications' data-color='#5D99A8'>
                My Robert Robot
                <span>Beep boop bop</span>
            </div>
            <div class='bar_item' data-canvas='users' data-color='#876869'>
                My Bunny Teddy
                <span>Ahhhh, what's up doc?</span>
            </div>
        </div>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
@import url("https://fonts.googleapis.com/css?family=Indie+Flower");
#def,
#statistics,
#security,
#notifications,
#users {
    display: none;
}
* {
    box-sizing: border-box;
}
.i {
    background: white;
    height: 100px;
    position: absolute;
    top: 50%;
    height: 250px;
    width: 100%;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
    z-index: 2;
    border-radius: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #a98578;
}
body {
    color: White;
    font-family: 'Indie Flower', cursive;
    font-weight: 900;
    margin: 0;
    padding: 0;
}
#main {
    position: absolute;
    right: -30px;
    z-index: 10;
    top: 50%;
    margin: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #a75b38;
    background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png");
    z-index: 2;
    pointer-events: none;
    background-size: 230px;
    background-blend-mode: multiply;
}
.l {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.c {
    width: 450px;
    height: 100vh;
    margin: 0 auto;
    position: relative;
}
.buy {
    position: absolute;
    right: -20px;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: 10px 30px;
    bottom: -24px;
    opacity: 0;
    z-index: 11;
    background: #b8e057;
    color: #7a923f;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.18);
}
.bar {
    display: none;
    margin-top: 12px;
    position: absolute;
    bottom: 60px;
    width: 200px;
    height: 250px;
    z-index: 2;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.bar_item {
    display: block;
    text-align: left;
    margin-right: -3px;
    cursor: pointer;
    font-weight: 200;
    padding: 8px 28px;
    font-size: 15px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.bar_item span {
    display: block;
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
}
.bar_item:nth-of-type(1):hover {
    color: #d44473;
}
.bar_item:nth-of-type(2):hover {
    color: #fbd05f;
}
.bar_item:nth-of-type(3):hover {
    color: #5bb3ca;
}
.bar_item:nth-of-type(4):hover {
    color: #e6a13b;
}