Canvas 唯美雨落代码实现

时间：2016-08-04 22:59:49 阅读：287 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>唯美雨落</title>
    <meta name="Keywords" content="关键词1,关键词2">
    <meta name="description" content="网页的描述内容">
    <!--响应式mate标签-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <base target="_blank"/>

    <style>
    </style>
</head>
<body>

    <canvas id="canvas" style="position: absolute; top: 0px; left: 0px; opacity: 0.58;" width="1366" height="216"></canvas>

    <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">

        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");
        var w = c.width = window.innerWidth;
        var h = c.height = window.innerHeight;
        var clearColor = ‘rgba(0, 0, 0, 0.1)‘;
        var max = 60;
        var drops = [];

        function random(min, max) {
            return Math.random() * (max - min) + min;
        }

        function randomColor(){
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            return "rgb("+r+","+g+","+b+")";//IE7不支出rgb
        };

        function O() {}
        O.prototype = {
            init: function() {
                this.x = random(0, w);
                this.y = 0;
                this.color = randomColor();
                this.w = 2;
                this.h = 1;
                this.vy = random(4, 5);
                this.vw = 3;
                this.vh = 1;
                this.size = 2;
                this.hit = random(h * .8, h * .9);
                this.a = 0.5;
                this.va = .96;
            },
            draw: function() {
                if (this.y > this.hit) {
                    ctx.beginPath();
                    ctx.moveTo(this.x, this.y - this.h / 2);
                    ctx.bezierCurveTo(
                            this.x + this.w / 2, this.y - this.h / 2,
                            this.x + this.w / 2, this.y + this.h / 2,
                            this.x, this.y + this.h / 2);

                    ctx.bezierCurveTo(
                            this.x - this.w / 2, this.y + this.h / 2,
                            this.x - this.w / 2, this.y - this.h / 2,
                            this.x, this.y - this.h / 2);

                    ctx.strokeStyle = ‘hsla(180, 100%, 50%, ‘+this.a+‘)‘;
                    ctx.stroke();
                    ctx.closePath();

                } else {
                    ctx.fillStyle = this.color;
                    ctx.fillRect(this.x, this.y, this.size, this.size * 5);
                }
                this.update();
            },
            update: function() {
                if(this.y < this.hit){
                    this.y += this.vy;
                } else {
                    if(this.a > .03){
                        this.w += this.vw;
                        this.h += this.vh;
                        if(this.w > 100){
                            this.a *= this.va;
                            this.vw *= .98;
                            this.vh *= .98;
                        }
                    } else {
                        this.init();
                    }
                }

            }
        }

        function resize(){
            w = c.width = window.innerWidth;
            h = c.height = window.innerHeight;
        }

        function setup(){
            canvas.style.opacity = "0.58";
            for(var i = 0; i < max; i++){
                (function(j){
                    setTimeout(function(){
                        var o = new O();
                        o.init();
                        drops.push(o);
                    }, j * 100)
                }(i));
            }
        }


        function anim() {
            ctx.fillStyle = clearColor;
            ctx.fillRect(0,0,w,h);
            for(var i in drops){
                drops[i].draw();
            }
            requestAnimationFrame(anim);
        }


        window.addEventListener("resize", resize);

        setup();
        anim();


    </script>
</body>


</html>

效果图：技术分享

IT技术和行业交流群 417691667

Canvas 唯美雨落代码实现

标签：

原文地址：http://www.cnblogs.com/sun-rain/p/5738537.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行