快捷導(dǎo)航

javascript實現(xiàn)起伏的水波背景效果

更新時間：2016年05月16日 09:33:09 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)起伏的水波背景效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js水波背景效果的實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

效果圖：

實現(xiàn)代碼：

<!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>
</html>

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript基于定時器實現(xiàn)進(jìn)度條功能實例
這篇文章主要介紹了javascript基于定時器實現(xiàn)進(jìn)度條功能,簡單分析了javascript定時器的功能、使用方法并給出了基于定時器實現(xiàn)的進(jìn)度條功能實例,需要的朋友可以參考下
2017-10-10
jQuery實現(xiàn)動態(tài)生成表格并為行綁定單擊變色動作的方法
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)生成表格并為行綁定單擊變色動作的方法,涉及jQuery頁面元素遍歷與事件動態(tài)響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04
JavaScript?中的運算符和表達(dá)式介紹(二)
這篇文章主要介紹了JavaScript?中的運算符和表達(dá)式介紹，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-09-09
array.prototype.silce.call 理解分析
在很多框架中與遇到這個方法，但一時沒去研究這個方法，只要前段時間被問到，尷尬無奈收場。所以學(xué)習(xí)就要追根究底的精神，廢話少說，說正題。
2010-04-04
基于canvas實現(xiàn)的絢麗圓圈效果完整實例
這篇文章主要介紹了基于canvas實現(xiàn)的絢麗圓圈效果,以完整實例形式分析了JavaScript結(jié)合html5的canvas實現(xiàn)動態(tài)圖形的繪制技巧,需要的朋友可以參考下
2016-01-01
原生js實現(xiàn)倒計時功能（多種格式調(diào)用）
本文主要介紹了原生js實現(xiàn)倒計時（多種格式調(diào)用）的方法，具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
javascript實現(xiàn)詳細(xì)時間提醒信息效果的方法
這篇文章主要介紹了javascript實現(xiàn)詳細(xì)時間提醒信息效果的方法,涉及javascript操作時間的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
JS清除IE瀏覽器緩存的方法
本文為大家詳細(xì)介紹下js中自動清除ie緩存的幾種方法，大家可以根據(jù)自己的需求自由選擇適合自己的，希望對大家學(xué)習(xí)js有所幫助
2013-07-07
uniapp和uniCloud開發(fā)中常出現(xiàn)的問題及解決匯總
使用uni 開發(fā)一段時間了,下面這篇文章主要給大家介紹了關(guān)于uniapp和uniCloud開發(fā)中常出現(xiàn)的問題及解決的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
JS實現(xiàn)的獲取銀行卡號歸屬地及銀行卡類型操作示例
這篇文章主要介紹了JS實現(xiàn)的獲取銀行卡號歸屬地及銀行卡類型操作,結(jié)合實例形式分析了javascript不依賴第三方接口計算銀行卡歸屬地相關(guān)信息操作技巧,需要的朋友可以參考下
2019-01-01