参考：https://github.com/cyclegtx/wave_background

做的水波背景，以后可能会用到哈！

效果如下：

代码如下：

  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.         var canvas = document.getElementById('canvas');
  14.         var ctx = canvas.getContext('2d');
  15.         canvas.width = canvas.parentNode.offsetWidth;
  16.         canvas.height = canvas.parentNode.offsetHeight;
  17.         //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
  18.         window.requestAnimFrame = (function(){
  19.         return  window.requestAnimationFrame       ||
  20.                 window.webkitRequestAnimationFrame ||
  21.                 window.mozRequestAnimationFrame    ||
  22.                 function( callback ){
  23.                   window.setTimeout(callback, 1000 / 60);
  24.                 };
  25.         })();
  26.         // 波浪大小
  27.         var boHeight = canvas.height / 10;
  28.         var posHeight = canvas.height / 1.2;
  29.         //初始角度为0
  30.         var step = 0;
  31.         //定义三条不同波浪的颜色
  32.         var lines = ["rgba(0,222,255, 0.2)",
  33.                        "rgba(157,192,249, 0.2)",
  34.                        "rgba(0,168,255, 0.2)"];
  35.         function loop(){
  36.             ctx.clearRect(0,0,canvas.width,canvas.height);
  37.             step++;
  38.             //画3个不同颜色的矩形
  39.             for(var j = lines.length - 1; j >= 0; j--) {
  40.                 ctx.fillStyle = lines[j];
  41.                 //每个矩形的角度都不同，每个之间相差45度
  42.                 var angle = (step+j*50)*Math.PI/180;
  43.                 var deltaHeight   = Math.sin(angle) * boHeight;
  44.                 var deltaHeightRight   = Math.cos(angle) * boHeight;
  45.                 ctx.beginPath();
  46.                 ctx.moveTo(0, posHeight+deltaHeight);
  47.                 ctx.bezierCurveTo(canvas.width/2, posHeight+deltaHeight-boHeight, canvas.width / 2, posHeight+deltaHeightRight-boHeight, canvas.width, posHeight+deltaHeightRight);
  48.                 ctx.lineTo(canvas.width, canvas.height);
  49.                 ctx.lineTo(0, canvas.height);
  50.                 ctx.lineTo(0, posHeight+deltaHeight);
  51.                 ctx.closePath();
  52.                 ctx.fill();
  53.             }
  54.             requestAnimFrame(loop);
  55.         }
  56.         loop();
  57.     </script>
  58. </body>
  59. </html>

CANVAS 水波动态背景的更多相关文章

  1. [Canvas]动态背景

    欲查看动态效果请点击下载代码再用Chrome或Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8&q ...

  2. 结合ItemsControl在Canvas中动态添加控件的最MVVM的方式

    今天很开心的收获: ItemsControl 中 ItemsPanel的重定义和 ItemContainerStyle 以及 ItemTemplate 三者的巧妙结合,在后台代码不实例化任何控件的前提 ...

  3. JavaScript之动态背景登陆表单

    <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. duilib修复ActiveXUI控件bug，以支持flash透明动态背景

    转载请说明原出处,谢谢~~ 昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了 防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背 ...

  5. [canvas]通过动态生成像素点做绚丽效果

    本例中的粒子就是实实在在的像素,由js代码在canvas上动态生成的像素点!这些像素点通过一个运动方法有规律地动了起来.透过这个思路,我们可以想到很多很炫的效果,但是这个性能有待考察.实验证明,动态控 ...

  6. Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客

    Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼

  7. JS canvas标签动态绘制图型

    使用canvas标签动态绘制图型,当点击鼠标时,以鼠标点击的坐标作为图形中心点.当点击数为偶数时画三角形,当点击数为奇数时画五角星 <!DOCTYPE HTML> <html> ...

  8. 桌面应用开发之WPF动态背景

      因为项目需要,在WPF开发的桌面应用中,登陆页面需使用动态背景.由于没有前端开发人员,所以由半吊子的后端开发人员根据效果图写前端xaml.去掉页面上边框,抽离动态背景设置代码: <Windo ...

  9. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

随机推荐

  1. 基于Bayes和KNN的newsgroup 18828文本分类器的Python实现

    向@yangliuy大牛学习NLP,这篇博客是数据挖掘-基于贝叶斯算法及KNN算法的newsgroup18828文本分类器的JAVA实现(上)的Python实现.入门为主,没有太多自己的东西. 1. ...

  2. ubuntu卸载安装mysql

    安装(转自http://www.cnblogs.com/xz1024/p/5802637.html): deb安装: 一.下载MySQL 到mysql网站下载相应的mysql安装包,我的mysql-s ...

  3. LayaAir引擎——（八）

    var a = new Array(); var b = new Array(); var ksjmCursor = 0; function ksjminit() { ksjminitName(); ...

  4. etl工具

    ETL 工具下载全集 包括 Informatica Datastage Cognos( 持续更新)   Datastage 8.0 BT种子下载:http://files.cnblogs.com/ta ...

  5. 在 CentOS 7.x / Fedora 21 上面体验 PHP 7.0

    编译自:http://linoxide.com/linux-how-to/install-php-7-centos-7-fedora-21/作者: Aun Raza原创:LCTT https://li ...

  6. linux系统下根据端口查看进程

    第一步:lsof -i:端口号 第二步:根据显示的pid号,查询对应应用程序. ps -ef | grep pid (这里的pid是:23466)

  7. int类型究竟占几个字节

    我最近也在看深入理解计算机系统这本书,上面提到了在32位机器和64机器中int类型都占用4个字节.后来,别人查了The C Programming language这本书,里面有一句话是这样的: Ea ...

  8. WebLogic 12c控制台上传获取webshell

    WebLogic 默认端口7001,一般可以通过这样来访问 http://10.9.1.1:7001/console 控制台 通过弱口令weblogic/weblogic登录控制台,下一步获取如何上传 ...

  9. WebAPI的Get和Post访问

    /// <summary> /// MVC 调用webapi接口返回框架快捷按钮和一级菜单(Get) /// </summary> /// <param name=&qu ...

  10. Javascript.//DOM

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年代后期微 ...