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=".........完整代码请登录后点击上方下载按钮下载查看