<!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. Ubuntu12.04之vi的问题

    版本:ubuntu12.04. 问题:vi不能正常使用方向键与退格键. 原因:ubuntu系统自带的 vi 不完整导致. 解决方法:安装完整的vi,sudo apt-get install vim-g ...

  2. c++ stl 使用汇总（string,vector,map,set）

    1.string 1>substr(),截取字串的方法.返回一个从指定位置开始,并具有指定长度的子字符串.参数 start(必选),所需的子字符串的起始位置.字符串中第一个字符的索引为 0.le ...

  3. 谈谈控制器技术SpringMVC与struts2

    SpringMVC与struts2区别 作为表现层中控制器技术的两大掌门人,有哪些不同神功? 首先struts2是作为类级别的拦截,一个类对应一个request上下文.springmvc是作为方法级别 ...

  4. SystemTap 学习笔记 - 安装篇

    https://segmentfault.com/a/1190000000671438 在安装前,需要知道下自己的系统环境,我的环境如下: uname -r 2.6.18-308.el5 Linux ...

  5. CSS3的animation功能

    旋转动画 <img src="https://facebook.github.io/react/img/logo.svg" class="App-logo" ...

  6. win7开启超级管理员账户（Administrator）

    win7开启超级管理员账户(Administrator) 不同于XP系统,Windows7系统据说出于安全的考虑,将超级管理员帐户"Administrator"在登陆界面给隐藏了, ...

  7. 017 SSH

    Router>en Router#config t Enter configuration commands, one per line.  End with CNTL/Z. Router(co ...

  8. [TypeScript] Use TypeScript’s never Type for Exhaustiveness Checking

    TypeScript 2.0 introduced a new primitive type called never, the type of values that never occur. It ...

  9. SQLServer时间分段查询

    统计连续时间段数据 if OBJECT_ID(N'Test',N'U') is not null drop table Test go create table Test( pscode decima ...

  10. Linux/UNIX之进程环境

    进程环境 进程终止 有8种方式使进程终止,当中5中为正常终止,它们是 1)      从main返回 2)      调用exit 3)      调用_exit或_Exit 4)      最后一个 ...