js实现canvas水波水纹波浪动画效果代码-html代码-BFW代码库

js实现canvas水波水纹波浪动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas水波水纹波浪动画效果代码，点击可切换颜色，触发波纹动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>	
<head>

<META charset="utf-8">
<style>
html{
  overflow:hidden;
}
body{
   margin:0px;
}
canvas{
   margin-left:-40px;
}
span{
	 height:7px;
   width:20px;
	 display:inline-block;
	 cursor:pointer;  
	 position:absolute;
	 top:0px;
			 transition: height 0.2s;
		  -o-transition: height 0.2s;	
		-moz-transition: height 0.2s;	
	 -webkit-transition: height 0.2s;	

}
span:hover{
	 height:12px;
}
#blue{
  background-color:#367aec;
  left:30px;
}
#purple{
  background-color:#f727d2;
  left:50px;
}
#black{
  background-color:#000000;
  left:70px;
}
#container{
  width:100%;
  
}      
</style>
</head>
<body>

<div id='container'>
	<canvas id="canvas">
		啊哦，你的浏览器不支持canvas. Sorry~
	</canvas>
	<span  id="blue" onClick="blue()"></span>
	<span id="purple" onClick="purple()"></span>
	<span id="black" onClick="black()"></span>
</div>
<script >
    var canvas,ctx;
	var vertexes = [];
	var diffPt = [];var autoDiff = 1000;
	var verNum = 250;
	var canvasW = window.innerWidth+40;
	var addListener = function( e, str, func ) {
		if( e.addEventListener ) {
			e.addEventListener( str, func, false );
		}else if( e.attachEvent ) {
			e.attachEvent( "on" + str, func );
		}else {
			
		}
	};
	
	addListener( window, "load", init );
	
	function resize(){
		canvasW = document.getElementById('container').offsetWidth + 40;	initCanvas(canvasW,window.innerHeight);
			var cW = canvas.width;
			var cH = canvas.height;
			for(var i = 0;i < verNum;i++)
				vertexes[i] = new Vertex(cW / (verNum -1) * i , cH / 2,cH/2);
			initDiffPt();
		var win_3 = window.innerWidth/3;

	}
	function init(){
		resize();
		var FPS =30;
		var interval = 1000 / FPS >> 0;
		var timer = setInterval( update, interval );
		if ( window.addEventListener ) a.........完整代码请登录后点击上方下载按钮下载查看