<!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. 【ZJOI2018 Round2游记】

    在主场作为高三退役选手要去听一些奇怪的宣讲 看看有没有PY的机会 语文考试考到一半溜出来 ZJU先上 开始挑衅 很勇啊 THU的校友 然而这些都离我太过遥远 最后PY了一波 获得了鼓励(并不) 最后的 ...

  2. [bzoj2091][Poi2010]The Minima Game_动态规划

    The Minima Game bzoj-2091 Poi-2010 题目大意:给出N个正整数,AB两个人轮流取数,A先取.每次可以取任意多个数,直到N个数都被取走.每次获得的得分为取的数中的最小值, ...

  3. 搬砖--杭电校赛（dfs）

    搬砖 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submissi ...

  4. 05-js德玛==和===判断

    <html> <head> <title>js的特殊关系运算符</title> <meta charset="UTF-8"/& ...

  5. SaltStack学习系列之state常用模块

    常用模块:cron,cmd,file,mount,ntp,pkg,service,user,group cmd模块 参数: name:要执行的命令 unless:用于检查的命令,只有unless指向的 ...

  6. Linux Shell參数扩展（Parameter Expansion）

    本文主要參考:http://pubs.opengroup.org/onlinepubs/9699919799/utilities/V3_chap02.html#tag_18_06_02 其它资料:ht ...

  7. Android处理日期

    近期做一个项目,后台返回的日期是RFC3339格式的.之前没有看到过,当中遇到了几个问题以及解决 1.2015-11-18T14:49:55Z转换 在SimpleDateFormat中给出了几种格式 ...

  8. Android学习笔记-获取手机内存，SD卡存储空间。

    前面介绍到如何保存数据到手机内存或者SD卡,但是问题是,在保存以前,我们还需要对他们的空间(可用空间),进行判断,才可以进行后续操作,所以,本节我们就介绍如何获取手机内存以及Sd卡的空间. //这时获 ...

  9. Deferred Rendering（二）G-Buffer的组织

    先来看一张网上广为流传的<杀戮地带2>典型的Deferred Shading的G-Buffer组织: 这里补充解释下几个点: 不存Position,而由depth和屏幕像素坐标反推出来.參 ...

  10. BestCoder Round #56/hdu5463 Clarke and minecraft 水题

    Clarke and minecraft 问题描述 克拉克是一名人格分裂患者.某一天,克拉克分裂成了一个游戏玩家,玩起了minecraft.渐渐地,克拉克建起了一座城堡. 有一天,克拉克为了让更多的人 ...