<!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. JavaScript图形实例：Canvas API

    1．Canvas概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 要使用HTML5在浏览器窗口中绘制 ...

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

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

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

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

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

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

随机推荐

  1. Struts2零配置介绍（约定访问）

    从struts2.1开始,struts2 引入了Convention插件来支持零配置,使用约定无需struts.xml或者Annotation配置 需要 如下四个JAR包 插件会自动搜索如下类 act ...

  2. Delphi7 客户端调用WebService（天气预报）

    客户程序:第一步:新建一个Application. 第二步:File----->New----->Other------>WebServices----->WSDL Impor ...

  3. 在 Chrome 中调试 Android 浏览器

    最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友. Chrome Devel ...

  4. Regionals 2012 :: Chengdu

    题目连接 排行榜 A和I都是签到题 按位BFS K Yet Another Multiple Problem 题意:给一些可以用的数字,求最小的数,它由特定的数字组成且是n的倍数 分析:暴力枚举不可行 ...

  5. 并查集(涂色问题) HDOJ 4056 Draw a Mess

    题目传送门 题意:给出一个200 * 50000的像素点矩阵,执行50000次操作,每次把一个矩形/圆形/菱形/三角形内的像素点涂成指定颜色,问最后每种颜色的数量. 分析:乍一看,很像用线段树成段更新 ...

  6. 通过adb命令打印log

    1.adb logcat  --打印当前设备上所有日志 2.adb logcat | findstr *** --过滤仅含***的日志 3.adb logcat *:W  --过滤打印严重级别W及以上 ...

  7. BZOJ2040 : [2009国家集训队]拯救Protoss的故乡

    以根为原点,所有叶子为汇点建立网络. 对于一条边$(x,y,A,B)$,$x$向$y$连边,容量$A$,费用0,再连边,容量$B-A$,费用1. 然后不断增广,直到费用达到$M$为止的最大流即为答案. ...

  8. hbase 问题记录

    hbase regionserver挂掉~ org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.hdfs.server.namenode.L ...

  9. [R]R语言里的异常处理与错误控制

    之前一直只是在写小程序脚本工具,几乎不会对异常和错误进行控制和处理. 随着脚本结构和逻辑更复杂,脚本输出结果的准确性验证困难,同时已发布脚本的维护也变得困难.所以也开始考虑引入异常处理和测试工具的事情 ...

  10. Windows下查看端口冲突的进程

    在tomcat部署中,经常遇到80端口被占用,下面总结了两条查看端口进程的方法. 查看端口方法: netstat -aon|findstr "80"   如图,使用80端口的进程列 ...