<!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 唯美雨落代码实现的更多相关文章

  1. Canvas修行之黑客帝国代码雨

    既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...

  2. Html5 Canvas笔记(1)-CanvasAppTemplate代码

    学了一段时间的Html5 Canvas,现想一段一段的将学习笔记整理出来放上来,先整理一段Canvas的模版文件代码,以后建立Canvas程序就不用重新写这些代码了,当然最好是将这个Html代码保存到 ...

  3. 数学还勉强管用,用代码还能画个canvas 仪表盘(含完整代码)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  5. Android查缺补漏(View篇)--自定义View利器Canvas和Paint详解

    上篇文章介绍了自定义View的创建流程,从宏观上给出了一个自定义View的创建步骤,本篇是上一篇文章的延续,介绍了自定义View中两个必不可少的工具Canvas和Paint,从细节上更进一步的讲解自定 ...

  6. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  7. HTML5 Canvas玩转酷炫大波浪进度图

    如上图所见,本文就是要实现上面那种效果. 由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果.所以首选大波浪进度图. 首先要封装一下大波浪图片进度组件.基本的原理是利用Canvas绘 ...

  8. canvas.drawBitmap()频繁调用导致应用崩溃问题

    因为opengl不熟,要在opengl上面贴文字  时间紧所以用到一个折中的办法  文字转bitmap 因为文字较多,对话形式  还要分行,分段,逻辑处理的比较复杂     运行中会有闪退发生,且不可 ...

  9. canvas的用法介绍

    目录 概述 绘图方法 图像处理方法 drawImage方法 getImageData方法,putImageData方法 toDataURL方法 save方法,restore方法 动画 像素处理 灰度效 ...

随机推荐

  1. shell 中 &amp;&amp;和||的方法

    Shell && 和 || shell 在执行某个命令的时候,会返回一个返回值,该返回值保存在 shell 变量 $? 中.当 $? == 0 时,表示执行成功:当 $? == 1 时 ...

  2. VS的工程链接优化的问题

    打算在项目中试试 CATCH 这个测试框架.请同事在工程中进行了试验,结果却出现了一点问题. CATCH 和 GTest 之类的框架一样,可以直接在 C++ 文件中定义测试函数,就能自动地注册到测试列 ...

  3. mysql查询表里的重复数据方法:

    INSERT INTO hk_test(username, passwd) VALUES ('qmf1', 'qmf1'),('qmf2', 'qmf11') delete from hk_test  ...

  4. c++中运算符重载,+,-,--,+=,-=,*,/,*=,/=,

    #include<iostream> #include<stdlib.h> using namespace std; class Complex { public: Compl ...

  5. kafka的安装和使用

    简单说kafka是一个高吞吐的分部式消息系统,并且提供了持久化. kafka的架构 • producer:消息生存者• consumer:消息消费者• broker:kafka集群的server,负责 ...

  6. thinkphp 3.2.3 入门示例2(URL传参数的几种方式)

    原文:thinkphp中URL传参数的几种方式 在thinkphp中,url传参合asp.net中原理类似,下面就单个参数和多个参数传递方式进行一个简单讲解 1.传单个参数 单个参数这种比较简单,例如 ...

  7. 新版SDK自己主动加入PlaceholderFragment的思考

    自从Android SDK更新到22.6.3,发现新建Activity的时候,会自己主动生成一个Fragment.这个Fragment是activity的静态内部类.同一时候生成了一个xml叫frag ...

  8. django 中的 ajax

    (Asynchronous Javascript And XML ) 特点: 异步 页面局部刷新 传递的数据量小 ajax 请求返回数据 重定向 location.href='/index/' 发请求 ...

  9. PAT 1082 射击比赛

    https://pintia.cn/problem-sets/994805260223102976/problems/994805260990660608 本题目给出的射击比赛的规则非常简单,谁打的弹 ...

  10. What is event bubbling and capturing?

    What is event bubbling and capturing? 答案1 Event bubbling and capturing are two ways of event propaga ...