<!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. Laravel 之Service Providers

    Service providers are the central place of all Laravel application bootstrapping. Your own applicati ...

  2. java&Protocol Buffers

    ps: Protocol Buffers简称PB PB 安装配置 下载 PB: 在 PB 官网,下载最新版(或者其他版本)PB,这里为了与 Java 项目中的 PB Maven 依赖版本一致,使用 P ...

  3. hdu 1114 Piggy-Bank

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...

  4. 从新注册 .DLL CMD 运行regsvr32 *.dll注册该DLL 或 regsvr32 /s *.DLL 求证

    从新注册 .DLL  CMD 运行regsvr32  *.dll注册该DLL  或 regsvr32 /s  *.DLL 求证

  5. 我的c++学习(5)switch语句详解

    #include "stdafx.h" #include<iostream> using namespace std; #include<iomanip> ...

  6. ashx 文件 与js文件数据交互

    //js代码 //城市下拉列表             $("#selPro").change(function() {                 var option = ...

  7. BOM和DOM的区别和关联

    BOM 1. BOM是Browser Object Model的缩写,即浏览器对象模型. 2. BOM没有相关标准. 3. BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切. ...

  8. 通过反射将变量值转为变量名本身ZZ

      这是.NET反射的一个有趣小例子:  通过反射将变量值转为变量名本身. 当然要先添加命名空间:using System.Reflection; 示例代码如下: class Program { st ...

  9. System.Windows.Markup.IQueryAmbient 在未被应用的程序集中定义

    按照<WIndows Presentation Foundation>中介绍建立的WPF程序,可以在VS2008中创建控制台应用程序所得.创建之后将程序集输出类型改为:Windows应用程 ...

  10. mapreduce.framework.name

    mapreduce.framework.name默认是local: <property><name>mapreduce.framework.name</name>& ...