<!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. 【框架】网络请求+Gson解析--Retrofit 2

    其实内部是封装了Okhttp和Gson解析 public class CourseFragmentAPI { public static void get(String userId, BaseCal ...

  2. java.util.List接口的方法subList()的使用注意事项

    JDK中,List接口有一个实例方法List<E> subList(int fromIndex, int toIndex), 其作用是返回一个以fromIndex为起始索引(包含),以to ...

  3. 关闭Android/iPhone浏览器自动识别数字为电话号码

    <meta name="format-detection" content="telephone=no"><meta http-equiv=& ...

  4. hdu5092 dp（递推）

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5092 题意:给一个m*n的矩阵,找到一个纵向的"线"使得线上的和最小并 ...

  5. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

  6. WordPress用户注册无法发送密码邮件怎么回事？

    wordpress无法发送电子邮件.可能原因:您的主机禁用了 mail() 函数 等等几句话.在网上一搜,很快找到了解决方案:使用wp-mail-smtp插件. 一.插件下载安装.可以在wordpre ...

  7. javaScript入门第一天

    JavaScript提供七种不同的data types(数据类型),它们是undefined(未定义), null(空), boolean(布尔型), string(字符串), symbol(符号), ...

  8. Shell 编程基础之 Case 练习

    一.语法 case $变量 in "第一个变量内容") # 每个变量内容建议用双引号括起来,关键字则为小括号 ) # 执行内容 ;; # 每个类别结尾使用两个连续的分号来处理! & ...

  9. PHP初学[DAY2]

    昨天安装了PHP的开发环境,根据一个百度经验里的介绍做的,可惜链接找不着了.目前状况是这样:在Apache24下有一个www的文件夹,通过编辑里边的index.php来学习PHP程序的编写,程序运行的 ...

  10. Storm与Spark：谁才是我们的实时处理利器

    Storm与Spark:谁才是我们的实时处理利器 ——实时商务智能目前已经逐步迈入主流,而Storm与Spark开源项目的支持无疑在其中起到了显著的推动作用.那么问题来了:实时处理到底哪家强? 实时商 ...