1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.      <title>水波背景</title>
  5.      <meta charset="utf-8" />
  6.      <style>
  7.          html, body {width:100%; height:100%; padding:0; margin:0;}
  8.      </style>
  9.     </head>
  10.     <body>
  11.          <canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>
  12.         <script type="text/javascript">
  13.            //获得canvas容器
  14.           var canvas = document.getElementById('canvas');
  15.           //获得画笔
  16.           var ctx = canvas.getContext('2d');
  17.           //canvas设置宽度
  18.           canvas.width = canvas.parentNode.offsetWidth;
  19.           //canvas设置高度
  20.           canvas.height = canvas.parentNode.offsetHeight;
  21.           //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
  22.           window.requestAnimFrame = (function(){
  23.           return window.requestAnimationFrame  ||
  24.             window.webkitRequestAnimationFrame ||
  25.             window.mozRequestAnimationFrame ||
  26.             function( callback ){
  27.                  window.setTimeout(callback, 1000 / 60);
  28.             };
  29.           })();
  30.           // 波浪大小
  31.           var boHeight = canvas.height / 10;
  32.           var posHeight = canvas.height / 1.2;
  33.           //初始角度为0
  34.           var step = 0;
  35.           //定义三条不同波浪的颜色
  36.           var lines = ["rgba(0,222,255, 0.2)", "rgba(157,192,249, 0.2)", "rgba(0,168,255, 0.2)"];
  37.           function loop(){
  38.               //清除canvas内容
  39.                ctx.clearRect(0,0,canvas.width,canvas.height);
  40.                step++;
  41.                //画3个不同颜色的矩形
  42.                for(var j = lines.length - 1; j >= 0; j--) {
  43.                 ctx.fillStyle = lines[j];
  44.                 //每个矩形的角度都不同，每个之间相差45度
  45.                 var angle = (step+j*50)*Math.PI/180;
  46.                 var deltaHeight = Math.sin(angle) * boHeight;
  47.                 var deltaHeightRight = Math.cos(angle) * boHeight;
  48.                 ctx.beginPath();
  49.                 ctx.moveTo(0, posHeight+deltaHeight);
  50.                 ctx.bezierCurveTo(canvas.width/2, posHeight+deltaHeight-boHeight, canvas.width / 2, posHeight+deltaHeightRight-boHeight, canvas.width, posHeight+deltaHeightRight);
  51.                 ctx.lineTo(canvas.width, canvas.height);
  52.                 ctx.lineTo(0, canvas.height);
  53.                 ctx.lineTo(0, posHeight+deltaHeight);
  54.                 ctx.closePath();
  55.                 ctx.fill();
  56.            }
  57.            requestAnimFrame(loop);
  58.           }
  59.           loop();
  60.      </script>
  61. </body>
  62. </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. 【HDOJ4812】D Tree（点分治）

    题意: 给定一棵 n 个点的树,每个点有权值 Vi 问是否存在一条路径使得路径上所有点的权值乘积 mod(10^6 + 3) 为 K 输出路径的首尾标号,若有多解,输出字典序最小的解 对于100%的数 ...

  2. Linux下汇编语言学习笔记5 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  3. Web 后端编程的几个关键点(总结中...)

    基础 服务端结构 服务器如何部署,负载均衡,代理技术,如何向B端提供服务? 分布式架构 与前端界面的交互形式 数据 CURD 表之间的关联 较为棘手 如何将一对多 多对多的概念进行 面向对象 描述 前 ...

  4. [bzoj3894]文理分科_网络流_最小割

    文理分科 bzoj-3894 题目大意:题目链接. 注释:略. 想法: 这种题也是一种套路. 我们新建一个点表示收益点. 然后把所有的收益都加一起,求最小割表示代价即可. Code: #include ...

  5. POJ3728 The merchant解题报告

    Description There are N cities in a country, and there is one and only one simple path between each ...

  6. Binary Tree Preorder Traversal （非递归实现）

    具体思路参见:二叉树的非递归遍历(转) 先序遍历(根左右). 即把每一个节点当做根节点来对待. /** * Definition for binary tree * struct TreeNode { ...

  7. JSP中操作Java Beans

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/beans.html: JavaBean是在编写Java时专门创建的Java类,根据JavaBean AP ...

  8. MongoDB小结11 - update【save】

    save是一个shell函数,调用它,可以在文档不存在时插入,存在时更新,它只有一个参数:文档.如果文档有 _id 这个 键,那么save会调用upsert,否则会调用insert,非常方便.

  9. springMVC多数据源使用 跨库跨连接

    原文:http://blog.itpub.net/9399028/viewspace-2106641/ http://blog.csdn.net/a973893384/article/details/ ...

  10. seajs入门使用

    使用 Sea.js 进行模块化开发还能够带来非常多优点: 模块的版本号管理. 通过别名等配置,配合构建工具,能够比較轻松地实现模块的版本号管理. 提高可维护性.模块化能够让每一个文件的职责单一,很有利 ...