<!DOCTYPE html>

<html>

<head>

 <title>水波背景</title>

 <meta charset="gb2312" />

 <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">

  var canvas = document.getElementById('canvas');

  var ctx = canvas.getContext('2d');

  canvas.width = canvas.parentNode.offsetWidth;

  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(){

   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>

canvas 水波纹的更多相关文章

  1. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  2. canvas水波纹效果

    先看效果 演示效果 自然界中水波纹效果十分麻烦,我这里只是根据水波纹的几个特性,在理想环境下模拟水波纹的扩散效果. 这里应用到的属性有:扩散.波动.折射. 扩散:很好理解,水波纹会从触发原点开始向周围 ...

  3. 适配移动端的在图片上生成水波纹demo

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

  4. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  5. canvas实现水波纹效果

    本文将会从水波的基本原理开始,详细讲解在canvas中模拟水波扩散,分析并计算水波的能量分布,并通过振幅模拟水波对图像的折射效果,最后实现水波特效. 水波基本原理 首先复习一波高中物理知识. 波是指振 ...

  6. android自定义控件(4)-自定义水波纹效果

    一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...

  7. android 5.0 水波纹 实现

    1. 定义一个普通圆角背景的xml; rounded_corners.xml <?xml version="1.0" encoding="utf-8"?& ...

  8. 自定义view实现水波纹效果

    水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...

  9. Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果

    利用环形渲染我们可以做到什么? 其实很多都是非常常见的,比如上一篇实现的帮帮糖效果, 彩色的热气球,比如这里要讲到的水波纹效果,或者也可以理解为扩散色渲染效果 首先看一下效果图: 轻触屏幕,即可看到对 ...

随机推荐

  1. P3803 【模板】多项式乘法（FFT）

    传送门: 参考博客 1:大佬  attack 参考博客 2:大佬  胡小兔 在这里再膜拜一下这两位大佬 Orz%%% #include<iostream> #include<cstd ...

  2. SQL SERVER-时间戳(timestamp)与时间格式(datetime)互相转换

    SQL里面有个DATEADD的函数.时间戳就是一个从1970-01-01 08:00:00到时间的相隔的秒数.所以只要把这个时间戳加上1970-01-01 08:00:00这个时间就可以得到你想要的时 ...

  3. AES加密解密 助手类 CBC加密模式

    "; string result1 = AESHelper.AesEncrypt(str); string result2 = AESHelper.AesDecrypt(result1); ...

  4. Ubuntu 常见的问题及常见软件的安装_ubuntu16.04

    1, 在使用 rpm 删除 rpm 包的时候的: rpm -r *** 报错: error reading information on service sfdc3: No such file or ...

  5. 移除Excel工作表密码保护小工具含C#源代码

    有朋友发了个Excel.xlsx文件给我,让我帮忙看看里面是怎么做出来的.打开审阅后发现,每个Excel工作表都添加了密码保护: 看不到里面的隐藏列和公式等等,感觉很神秘.于是研究了一下Excel文件 ...

  6. MUI 返回顶部

    //绑定滚动到顶部按钮事件 if ($("#scroll-up").length > 0) { var scrollToTopBox = $("#scroll-up ...

  7. FB面经 Prepare: LCA of Deepest Nodes in Binary Tree

    给一个 二叉树 , 求最深节点的最小公共父节点 . retrun . 先用 recursive , 很快写出来了, 要求用 iterative . 时间不够了... Recursion: 返回的时候返 ...

  8. Python练习:爬虫练习,从一个提供免费代理的网站中爬取IP地址信息

    西刺代理,http://www.xicidaili.com/,提供免费代理的IP,是爬虫程序的目标网站. 开始写程序 import urllib.requestimport re def open_u ...

  9. 2017-2018_OCR_papers汇总

    2017-2018_OCR_papers 1. 简单背景 基于深度的OCR方法的发展历程 近年来OCR发展热点与趋势 检测方法按照主题进行分类 2. ECCV + CVPR + ICCV +AAAI ...

  10. 理解linux网络管理命令

    linux 管理命令,iproute 查看帮助文件: man ip 以下为常用帮助文件. SEE ALSO ip-address(), ip-addrlabel(), ip-l2tp(), ip-li ...