<!DOCTYPE html>

<html>

    <head>

     <title>水波背景</title>

     <meta charset="utf-8" />

     <style>

         html, body {width:100%; height:100%; padding:0; margin:0;}

     </style>

    </head>

    <body>

         <canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>

        <script type="text/javascript">

           //获得canvas容器

          var canvas = document.getElementById('canvas');

          //获得画笔

          var ctx = canvas.getContext('2d');

          //canvas设置宽度

          canvas.width = canvas.parentNode.offsetWidth;

          //canvas设置高度

          canvas.height = canvas.parentNode.offsetHeight;

          //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout

          window.requestAnimFrame = (function(){

          return window.requestAnimationFrame  ||

            window.webkitRequestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            function( callback ){

                 window.setTimeout(callback, 1000 / 60);

            };

          })();

          // 波浪大小

          var boHeight = canvas.height / 10;

          var posHeight = canvas.height / 1.2;

          //初始角度为0

          var step = 0;

          //定义三条不同波浪的颜色

          var lines = ["rgba(0,222,255, 0.2)", "rgba(157,192,249, 0.2)", "rgba(0,168,255, 0.2)"];

          function loop(){

              //清除canvas内容

               ctx.clearRect(0,0,canvas.width,canvas.height);

               step++;

               //画3个不同颜色的矩形

               for(var j = lines.length - 1; j >= 0; j--) {

                ctx.fillStyle = lines[j];

                //每个矩形的角度都不同，每个之间相差45度

                var angle = (step+j*50)*Math.PI/180;

                var deltaHeight = Math.sin(angle) * boHeight;

                var deltaHeightRight = Math.cos(angle) * boHeight;

                ctx.beginPath();

                ctx.moveTo(0, posHeight+deltaHeight);

                ctx.bezierCurveTo(canvas.width/2, posHeight+deltaHeight-boHeight, canvas.width / 2, posHeight+deltaHeightRight-boHeight, canvas.width, posHeight+deltaHeightRight);

                ctx.lineTo(canvas.width, canvas.height);

                ctx.lineTo(0, canvas.height);

                ctx.lineTo(0, posHeight+deltaHeight);

                ctx.closePath();

                ctx.fill();

           }

           requestAnimFrame(loop);

          }

          loop();

     </script>

</body>

</html>

js实现水波纹背景的更多相关文章

  1. android 5.0 默认水波纹背景属性,可设置不论什么View

    actionBarItemBackground   5.0以上超出边界圆形水波纹 selectableItemBackground  5.0以上边界内圆形水波纹 这两个属性在5.0下面是默认的灰色效果 ...

  2. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  3. css 滚动视差 之 水波纹效果

    核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上. 我们来看个例子: htm ...

  4. WebGL——水波纹特效

    大家好,今天我ccentry要做一个水波纹特效,我们来看看水波纹特效的做法.首先我们来看一下水波纹特效的效果是怎么样的,请看下图. 我们要做的就是类似这种纹理特效,那么我们来看看是如何制作的吧.首先鲫 ...

  5. jquery ripples水波纹效果( 涟漪效果)

    这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...

  6. 兼容Android的水波纹效果

    Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...

  7. android 5.0 水波纹 实现

    1. 定义一个普通圆角背景的xml; rounded_corners.xml <?xml version="1.0" encoding="utf-8"?& ...

  8. 聊聊Android5.0中的水波纹效果

    水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来 ...

  9. android 点击水波纹效果

    这里是重点,<ripple>是API21才有的新Tag,正是实现水波纹效果的; 其中<ripple android:color="#FF21272B" .... ...

随机推荐

  1. Jquery判断某个字符串是否在数组中

    使用$.inArray方法判断,如果存在则返回0,不存在返回-1,结果如下: 另外也可以将数组转为字符串,并使用正则表达式处理

  2. linux 命令练习 2018-08-27

    linux 命令练习 2018-08-27 uname  显示系统名字 [test@localhost ~]$ uname Linux uname -a   即列出linux的内核版本号 [test@ ...

  3. python函数值传递还是引用传递

    c/c++中有值传递引用传递的区别.但是python中是值传递还是引用传递呢?首先看python中对变量的定义 "python中变量是指向某个内存的, 而内存中的内容是不可变的." ...

  4. Map根据value排序ASC DESC

    原文:http://blog.csdn.net/k21325/article/details/53259180 需求有点刁钻,写关键词组合匹配标题的时候,遇到关键词像这样 XXX XXX 1222 X ...

  5. ArcEngine 打开AutoCAD文件的几种方法

    方法一. IWorkspaceFactory pWorkspaceFactory; IFeatureWorkspace pFeatureWorkspace; IFeatureLayer pFeatur ...

  6. C#的SplitPanel如何设置上下和左右

    定位到Orientation属性即可

  7. 网络最大流增广路模板(EK &amp; Dinic)

    EK算法: int fir[maxn]; int u[maxm],v[maxm],cap[maxm],flow[maxm],nex[maxm]; int e_max; int p[maxn],q[ma ...

  8. 加入收藏BUG改善

    <script type="text/javascript"> function add_favorite(a, title, url) { url = url || ...

  9. 为什么有些信号线串接33R小电阻？

    本人只是刚入坑的硬件助理,一名小白,很多都知识不懂,以下信息多数来自网络,可能不准确,恳请批评指正! 正文: 参考资料:http://blog.csdn.net/xiangyuqxq/article/ ...

  10. PHP在浏览器上跟踪调试的方法以及使用ChromePhp、FirePHP的简介

    之前用ThinkPHP时发现有个 trace 函数能够跟踪调试,感觉非常有意思.网上搜索了下类似的东西.发现了 ChromePhp ,曾经没想过这样来调试 PHP 程序.感觉非常方便,非常实用. Th ...