<!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. SQL详解（下）

    约束 *约束是添加在列上的,用来约束列的! 1. 主键约束(唯一标识)  特点:非空,唯一,被引用  创建表时指定主键的两种方式,分别为:    CREATE TABLE stu(     sid   ...

  2. Spring事务解析3-增强方法的获取

    从InfrastructureAdvisorAutoProxyCreator的层次结构中可以看到,InfrastructureAdvisorAutoProxyCreator间接实现了SmartInst ...

  3. 20145223《Java程序程序设计》实验报告5

    20145223杨梦云<Java网络编程> 一.实验内容 ·1.运行下载的TCP代码,结对进行,一人服务器,一人客户端: ·2.利用加解密代码包,编译运行代码,一人加密,一人解密: ·3. ...

  4. Android自动化测试 - MonkeyRunner(二) 锤子便签测试脚本

    来源于:http://testerhome.com/topics/878 # encoding=utf-8 #导入python中自带的time模块和sys模块,脚本中都要用到它们. import ti ...

  5. Hadoop2.0(HDFS2)以及YARN设计的亮点

    YARN总体上仍然是Master/Slave结构,在整个资源管理框架中,ResourceManager为Master,NodeManager为Slave,ResouceManager负责对各个Node ...

  6. 【Oracle】Oracle 11g 64位安装完后，ora-12541错误和ora-12514错误的解决

    问题描述: 干净的windows2008 64位服务器上安装 oracle 11g R2 64bit服务端,安装完后,NetManager中默认的主机名为localhost,可以测试通过.但是无法在别 ...

  7. JavaScript 开发者经常忽略或误用的七个基础知识点

    JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...

  8. SAD算法在opencv上的实现代码（c++）

    #include <opencv2/opencv.hpp>#include <opencv2/core/core.hpp>#include <opencv2/highgu ...

  9. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  10. ACM BUYING FEED

    BUYING FEED 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 Farmer John needs to travel to town to pick up ...