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

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

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

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

效果圖：

實(shí)現(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++; 
   //畫(huà)3個(gè)不同顏色的矩形 
   for(var j = lines.length - 1; j >= 0; j--) { 
    ctx.fillStyle = lines[j]; 
    //每個(gè)矩形的角度都不同，每個(gè)之間相差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>

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

您可能感興趣的文章:

相關(guān)文章

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