html - HTML 5 画布粒子

Question

http://www.mrspeaker.net/

这家伙制作了他的整个背景粒子，但我一直在 Inspect Element 中四处游荡，以弄清楚他是如何做到的，但不能。我不太确定它是如何完成的有没有人知道他这样做的代码？

Answer 1

查看 speaker.js 文件。当页面加载时，他创建了一个空的 div 并在其中添加了 18 个称为“气泡”的 div。每个气泡都有一个更新方法，可以改变它的位置，慢慢地爬上屏幕。

此外，他在页面上设置了一个计时器，每 200 毫秒调用一次页面范围的更新方法。在页面范围的更新方法中，他在每个气泡上调用更新。

我打算发布代码，但我看到qntmfred 已经有了.

Answer 2

http://www.mrspeaker.net/wp-content/themes/stuartspeaker/scripts/speaker.js

$( window ).load( function(){
    bubbleController.init();
    setInterval( function(){
        bubbleController.update()
    }, 200 ); 
    $( window ).resize(function(){
        bubbleController.setBoundaries();
    }); 

    if( $( ".leftcolumn" ).length )
    {
        //main page
        var leftColumn = parseInt( $( ".leftcolumn" ).height(), 10 );
        var rightColumn = parseInt( $( ".rightcolumn" ).height(), 10 );
        /* Going to add extra stuff if the columns are uneven */
    }
    else{
        swapTwitterPix();
    }
});

var bubbleController = {
    bubbles : [],
    screenWidth : 0,
    leftEdge : 0,
    rightEdge : 0,
    channelWidths : [],
    minBubbleWidth : 10,
    maxBubbleWidth : 100,

    init : function(){
        this.setBoundaries();
        $("<div></div>").attr("id", "bubbleContainer").appendTo( $("body") );
        for( var i = 0; i < 18; i++ ) {
            var side = ( i % 2 === 0 ) ? 1 : 0;
            var bub = new bubble();
            this.bubbles.push( bub );
            var width = Math.floor( Math.random() * this.maxBubbleWidth ) + this.minBubbleWidth;
            bub.init(
                this.getXPos( side ),
                Math.floor( Math.random() * 800 ),
                side,
        (Math.random()*20/100).toFixed(2),
                width,
                Math.floor( ( ( ( this.maxBubbleWidth + this.minBubbleWidth ) - width ) / 8 ) / 5 ) + 1,
                "#bubbleContainer" );
        }   
    },
    getXPos : function( blnLeftOrRight ) {
        var xpos = ( Math.random() * this.channelWidths[ blnLeftOrRight ] );// + ( this.maxBubbleWidth / 2 );
        return Math.floor(  xpos / ( this.channelWidths[ blnLeftOrRight ] ) * 100 );
    },
    setBoundaries : function() {
        this.screenWidth = $("body").width();
        this.leftEdge = $("#outerWrapper").position().left;
        this.rightEdge = this.leftEdge + 1040;

        this.channelWidths[ 0 ] = this.leftEdge < 150 ? 150 : this.leftEdge;
        this.channelWidths[ 1 ] = this.screenWidth - this.rightEdge;
    },
    update : function() {
        $.each( this.bubbles, function() {
            this.update();
        });
    }
};

function bubble(){
    this.domRef;
    this.diameter;
    this.x;
    this.xPerc;
    this.y;
    this.side;
    this.opacity;
    this.speed;

    this.init = function( x, y, side, opacity, diameter, speed, addToElement ){
        this.side = side;
        this.xPerc = x;
        this.y = y;
        this.speed = speed;
        this.opacity = opacity;
        this.diameter = diameter;
        this.domRef = $("<div></div")
            .addClass( "bubble" )
            .css("top", this.y )
            .css("left", this.getXPos() )
            .css( "opacity", this.opacity )
            .appendTo( $( addToElement ) );
            //.css("z-index", "-1")

        var img = $( "<img></img>" )
                //.attr("src", baseUrl + "/images/circle_" + this.colour + "_des.png" )
                .attr("src", "/images/circleeye.png" )
                .attr("height", this.diameter )
                .appendTo( this.domRef )
                .show()
                /*.load(function(){
                    // Whoa... cpu == 90% for long fades
                    $(this).fadeIn( 20000 );
                });*/
    };

    this.getXPos = function() {
        this.x = ( bubbleController.channelWidths[ this.side ] * ( this.xPerc / 100 ) ) - ( this.diameter / 2 );
        this.x += this.side == 1 ? bubbleController.rightEdge : 0;
        return this.x;
    };

    this.update = function() {
        this.y -= this.speed;
        this.x = this.getXPos();
        if( this.y < -this.diameter ) {
            this.y = 800;
            this.xPerc = bubbleController.getXPos( this.side );
            this.x = this.getXPos();
            this.opacity = (Math.random()*15/100).toFixed(2);
            this.fireFadeIn();
        }
        this.updateDom();
    };

    this.setInit = function(){

    };

    this.updateDom = function() {
        this.domRef
            .css("top", this.y )
            .css("left", this.x );
    };

    this.fireFadeIn = function() {
        this.domRef
            .hide()
            .css( "opacity", this.opacity )
            .fadeIn( 5000 );
    };
}

HTML5ps从我快速阅读标记和javascript来看，这并没有什么真正的意义