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 ) addListener( window, "DOMMouseScroll", wheelHandler );
		addListener( window, "mousewheel", wheelHandler );
		addListener(window,"resize",resize);
		
		canvas.onmousedown=function(e)
		{
				//div.innerHTML=e.clientX+":"+e.clientY;
				//var mx = document.getElementById("mx");
				
				//alert(1);
		var mouseX,mouseY;
				if (e) {
					mouseX = e.pageX;
					mouseY = e.pageY;
				}else {
				mouseX = event.x + document.body.scrollLeft;
				mouseY = event.y + document.body.scrollTop;
				}
				
				
				if(window.innerHeight/2 - mouseY < 50 && window.innerHeight/2 - mouseY> -50)
					//diffPt[150] = autoDiff;
					{
					autoDiff = 1000;
					if(mouseX<canvas.width-2){
						xx = 1 + Math.floor((verNum - 2) * mouseX / canvas.width);
						
						diffPt[xx] = autoDiff;
					}
					
					}
		}
	}
	
	var wheelHandler = function( e ) {
			var s = ( e.detail ) ? -e.detail : e.wheelDelta;
			s > 0 ? ( dd > 15 ? dd-- :  dd=dd).........完整代码请登录后点击上方下载按钮下载查看