<!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. LR通过snmp监控linux下的mysql

    LR通过snmp监控linux下的mysql 在linux底下安装配置snmp: 1.使用系统盘安装rpm包(这种方式最好) 2.在www.net-snmp.org处下载net-snmp安装(安装后有 ...

  2. python 定义类方法

    定义类方法 和属性类似,方法也分实例方法和类方法. 在class中定义的全部是实例方法,实例方法第一个参数 self 是实例本身. 要在class中定义类方法,需要这么写: class Person( ...

  3. J2EE中使用jstl报http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar错

    一.发现问题 运行引用了jstl的jsp页面 报http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or th ...

  4. CentOS升级Python 2.6到2.7

    查看python的版本 python -V Python 2.6.6 下载Python   Python-2.7.8.tar.xz      链接:http://pan.baidu.com/s/1i4 ...

  5. AOP动态代理解析1-标签的解析

    spring.handlers http\://www.springframework.org/schema/aop=org.springframework.aop.config.AopNamespa ...

  6. JS日期函数

    JS的日期函数有以下几个: getFullYear(); //获取当前年 getMonth(); //获取当前月,需要加1,而且只有一位数字,如果小于10需要前面加0 getDate(); //获取当 ...

  7. 封装原生Ajax

    var Chef = { createAjax:function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("m ...

  8. Service Provider模式

    参考文章:[http://blog.csdn.net/zl3450341/article/details/7227197] Service Interface:服务接口,将服务通过抽象统一声明,供客户 ...

  9. 反射和动态代理实现上下文切入AOP效果

    Java的反射框架提供了动态代理机制,允许在运行期对目标类生成代理,避免重复开发,实现上下文切入的功能. 代码是最好的交流语言: Subject接口 RealSubject实现接口 SubjectHa ...

  10. ol新属性

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