javascript:google-frazon

canvas_frozen.js

(function() {
    var canvas = document.getElementById('theme-canvas');
    var container = document.getElementById('doc-view');
    var ctx = canvas.getContext('2d');
    var clearArray = [];
    var paintFlag = false;
    function Frozen(x, y, w, h, count, radius) {
        this.x = x;
        this.y = y;
        this.width = w;
        this.height = h;
        this.count = count;
        this.radius = radius;
    }

    Frozen.prototype.frost = function() {
        ctx.fillStyle = "rgba(255, 255, 255, 0.35)";
        ctx.shadowBlur = 5;
        ctx.shadowColor = "rgba(255, 255, 255, 1)";
        ctx.beginPath();
        ctx.arc(Math.random() * this.width + this.x, Math.random() * this.height + this.y, this.radius, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
    };

    function shape(x, y, radius) {
        this.x = x;
        this.y = y;
        this.radius = radius;
    }

    function clean() {
        for (var i = 0, l = clearArray.length; i < l; i++) {
            ctx.beginPath();
            ctx.arc(clearArray[i].x, clearArray[i].y, clearArray[i].radius, 0, Math.PI*2, false);
            ctx.closePath();
            ctx.globalCompositeOperation="destination-out";
            ctx.fill();
        }
    }

    function frosting() {
        var count = 1;
        var x = 0, y = 0;
        var width = 1900, height = 20;
        var frozenArray = [];
        var _timer = setInterval(function() {
            if (!(count % 150)) {
                height += 15;
                y += 15;
            }
            count++;
            (new Frozen(x, y, width, height, count, Math.random() * 5 + 20)).frost();

            if (height >= 210) {
                ctx.clearRect(0, 0, 1000, 220);
                ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
                ctx.fillRect(0, 0, width, 220);
                clearInterval(_timer);

                container.onmousedown = function() {
                    paintFlag = true;
                    container.onmousemove = function(e) {
                        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

                        if (paintFlag) {
                            clearArray.push(new shape(e.pageX, e.pageY, 30));
                            clean();
                        }
                    };                    
                };

                container.onmouseup = function() {
                    document.onselectstart = function() {
                        return true;
                    };
                    paintFlag = false;
                    container.onmousemove = null;
                };


            }
        }, 10);
    }
    canvas.width=window.innerWidth - 17;
    canvas.height=window.innerHeight;
    W(window).on('resize', function() {
            canvas.width=window.innerWidth - 17;
            canvas.height=window.innerHeight;
    });

    var konami = Konami();
    konami.down('up->up->a->b->c', function() {
        frosting();
    });
})();