简易demo送给母亲，祝所有母亲节日快乐！

最新推荐文章于 2023-04-25 13:09:25 发布

凌云之音

最新推荐文章于 2023-04-25 13:09:25 发布

阅读量1.4k

点赞数 2

分类专栏：生活

本文链接：https://blog.csdn.net/SilentWu/article/details/106037380

版权

生活专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.效果

2.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Happy Mothers's Day</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>
</head>
<body>
<canvas id="c">

</canvas>
<img src="/static/images/mother.jpg" id="img" style="display: none"/>

<script>
    var w = c.width = window.innerWidth,
        h = c.height = window.innerHeight,
        ctx = c.getContext( '2d' ),

        opts = {
            phrases: [ "You're the best", "Every day,\nYou're beautiful","You're better than them,\nwhoever they are", "You're so amazing","A mother's love \nis the greatest power in the world"],
            balloons: 10,
            baseVelY: -1,
            addedVelY: -1,
            baseVelX: -.25,
            addedVelX: .5,
            baseSize: 70,
            addedSize: 20,
            baseSizeAdder: 2,
            addedSizeAdder: 2,
            baseIncrementer: .01,
            addedIncrementer: .03,
            baseHue: -10,
            addedHue: 30,
            font: '20px Verdana'
        },

        cycle = 0,
        balloons = [];

    ctx.font = opts.font;

    function Balloon(){
        this.reset();
    }
    Balloon.prototype.reset = function(){

        this.size = opts.baseSize + opts.addedSize * Math.random();
        this.sizeAdder = opts.baseSizeAdder + opts.addedSizeAdder * Math.random();
        this.incrementer = opts.baseIncrementer + opts.addedIncrementer * Math.random();

        this.tick = 0;

        this.x = Math.random() * w;
        this.y = h + this.size;

        this.vx = opts.baseVelX + opts.addedVelX * Math.random();
        this.vy = opts.baseVelY + opts.addedVelY * Math.random();

        this.color = 'hsla(hue,70%,60%,.8)'.replace( 'hue', opts.baseHue + opts.addedHue * Math.random() );
        this.phrase = opts.phrases[ ++cycle % opts.phrases.length ].split( '\n' );
        this.lengths = [];

        for( var i = 0; i < this.phrase.length; ++i )
            this.lengths.push( -ctx.measureText( this.phrase[ i ] ).width / 2 );
    }
    Balloon.prototype.step = function(){

        this.tick += this.incrementer;
        this.x += this.vx;
        this.y += this.vy;

        var size = this.size + this.sizeAdder * Math.sin( this.tick );

        ctx.lineWidth = size / 40;
        ctx.strokeStyle = '#de7678';
        ctx.beginPath();
        ctx.moveTo( this.x, this.y - 2 );
        ctx.lineTo( this.x, this.y + size );
        ctx.stroke();
        ctx.fillStyle = this.color;

        ctx.translate( this.x, this.y );
        ctx.rotate( Math.PI / 4 );
        //ctx.fillRect( -size / 2, -size / 2, size / 2, size / 2 );
        ctx.beginPath();
        ctx.moveTo( 0, 0 );
        ctx.arc( -size / 2, -size / 2 + size / 4, size / 4, Math.PI / 2, Math.PI * 3 / 2 );
        ctx.arc( -size / 2 + size / 4, -size / 2, size / 4, Math.PI, Math.PI * 2 );
        ctx.lineTo( 0, 0 );
        ctx.fill();
        ctx.rotate( -Math.PI / 4 );
        ctx.translate( -this.x, -this.y );

        ctx.translate( this.x, this.y + size + 15 );
        ctx.scale( size / this.size, size / this.size );
        ctx.fillStyle = '#de7678';
        for( var i = 0; i < this.phrase.length; ++i )
            ctx.fillText( this.phrase[ i ], this.lengths[ i ], i * 15 );
        ctx.scale( this.size / size, this.size / size );
        ctx.translate( -this.x, -( this.y + size + 15 ) );

        if( this.y < -size * 3 )
            this.reset();

    }

    function anim(){

        window.requestAnimationFrame( anim );
        var img=document.getElementById("img");
        ctx.drawImage(img,0, 0, w, h );


        if( balloons.length < opts.balloons && Math.random() < .01 )
            balloons.push( new Balloon );

        for( var i = 0; i < balloons.length; ++i )
            balloons[ i ].step();

    }

    anim();


</script>


</body>
</html>