<!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. node+mongodb+win7

    一.安装mongodb,参照教程,注意要先启动mongod.exe,再启动mongd.exe.

  2. 关于SQL命令中不等号（!=,<>）

    比较两个表达式(比较运算符).当比较非空表达式时,如果左边操作数的数值不等于右边的操作数,则结果为 TRUE:否则结果为 FALSE.如果两个操作数中有一个或者两个都为 NULL,并且 SET ANS ...

  3. 关于函数return的一些理解与小实例

    先看代码: function example (){ var index=1; return {//像这种加个大括号的就是返回一个对象了,而不仅仅是一个值 index, net:function(){ ...

  4. jQuery無刷新上傳之uploadify簡單試用

    先簡單的侃兩句:貌似已經有兩個月的時間沒有寫過文章了,不過仍會像以前那样每天至少有一至兩個小時是泡在园子裏看各位大神的文章.前些天在研究“ajax無刷新上傳”方面的一些插件,用SWFUpload實現了 ...

  5. SSL和SSH的差别

    有人说,SSH通常是用来提供安全的登录用的.SSL仅仅是一个在协议层中增加的一层用来提供安全.    SSH工作在TCP之上,能够在启动一个SSH应用后.在其通道里执行其他协议的应用.如邮件.    ...

  6. jquery.validate自己定义验证--成功提示与择要提示

    1. 自己定义验证--成功提示 1) 加入选项 errorClass: "unchecked". validClass: "checked", errorEle ...

  7. Grails边做边学入门篇[1]--------大家一起来动手建立project和Domain

    近期工作比較忙,没空写博客了.我发现每周五的下午都是我最放松的时候,可能是迟延症的缘故吧...总是寄希望于周末,慢慢的.我的周末就被工作占领了. 希望大家不要有这种坏毛病.今日事,今日毕.当然我们程序 ...

  8. visual studio ， JavaScript ， UnitTest

    https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/debug-test/basic-test ...

  9. POJ 3100:Root of the Problem

    Root of the Problem Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12060   Accepted: 6 ...

  10. XML解析方式汇总

    XML解析方式汇总 分类: XML2011-08-23 19:19 167人阅读 评论(0) 收藏 举报 xmlstringexceptionattributesclassiterator DOM解析 ...