HTML5 Canvas图片倒影波纹特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 Canvas图片倒影波纹特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas图片倒影波纹特效</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
	#lakes { overflow: hidden; }
	  #container {
		width: 720px;
		margin: 30px auto;
	  }
	canvas { float: left; }
</style>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/lake.js"></script>
<script type="text/javascript">
	$(function() {
		$('#lake-img').lake({
		  'waves': 6,
		  'scale': 0.5
		});

		$('#lake-img2').lake();

		$('#lake-img3').lake({
		  'speed': 1.5,
		  'scale': 1.5
		});
	  });
</script>

</head>
<body>
<div id="container">
	  <div id="lakes">
		<img id="lake-img"  src="img/lake.png" style="display: none;">
		<img id="lake-img2" src="img/lake2.png" style="display: none;">
		<img id="lake-img3" src="img/lake3.png" style="display: none;">
	  </div>
</div>
</body>
</html>

JS代码(lake.js):

(function($){
	jQuery.fn.lake = function(options){
	var settings = $.extend({
	'speed':1,'scale':1,'waves':10,'image':true}
,options);
	var waves = settings['waves'];
	var speed = settings['speed']/4;
	var scale = settings['scale']/2;
	var ca = document.createElement('canvas');
	var c = ca.getContext('2d');
	var img = this.get(0);
	var img_loaded = false;
	img.parentNode.insertBefore(ca,img);
	var w,h,dw,dh;
	var offset = 0;
	var frame = 0;
	var max_frames = 0;
	var frames = [];
	img.onload = function(){
	c.save();
	c.canvas.width = this.width;
	c.canvas.height = this.height*2;
	c.drawImage(this,0,0);
	c.scale(1,-1);
	c.drawImage(this,0,-this.height*2);
	img_loaded = true;
	c.restore();
	w = c.canvas.width;
	h = c.canvas.height;
	dw = w;
	dh = h/2;
	var id = c.getImageData(0,h/2,w,h).data;
	var end = false;
	// precalc frames // image displacement c.save();
	while (!end){
	// var odd = c.createImageData(dw,dh);
	var odd = c.getImageData(0,h/2,w,h);
	var od = odd.data;
	// var pixel = (w*4) * 5;
	var pixel = 0;
	for (var y = 0;
	y < dh;
	y++){
	for (var x = 0;
	x < dw;
	x++){
	// var displacement = (scale * dd[pixel]) | 0;
	var displacement = (scale * 10 * (Math.sin((dh/(y/waves)) + (-offset)))) | 0;
	var j = ((displacement + y) * w + x + displacement)*4;
	// horizon flickering fix if (j < 0){
	pixel += 4;
	continue;
}
// edge wrapping fix var m = j % (w*4);
	var n = scale * 10 * (y/waves);
	if (m < n || m > (w*4)-n){
	var sign = y < w/2 ? 1:-1;
	od[pixel] = od[pixel + 4 * sign];
	od[++pixel] = od[pixel + 4 * sign];
	od[++pixel] = od[pixel + 4 * sign];
	od[++pixel] = od[pixel + 4 * sign];
	++pixel;
	continue;
}
if (id[j+3] != 0){
	od[pixel] = id[j];
	od[++pixel] = id[++j];
	od[++pixel] = id[++j];
	od[++pixel] = id[++j];
	++pixel;
}
else{
	od[pixel] = od[pixel - w*4];
	od[++pixel] = od[pixel - w*4];
	od[++pixel] = od[pixel - w*4];
	od[++pixel] = od[pixel - w*4];
	++pixel;
	// pixel += 4;
}
}
}
if (offset > speed * (6/speed)){
	offset = 0;
	max_frames = frame - 1;
	// frames.pop();
	frame = 0;
	end = true;
}
else{
	offset += speed;
	frame++;
}
frames.push(odd);
}
c.restore();
	if (!settings.image){
	c.height = c.height/2;
}
}
;
	setInterval(function(){
	if (img_loaded){
	if (!settings.image){
	c.putImageData(frames[frame],0,0);
}
else{
	c.putImageData(frames[frame],0,h/2);
}
// c.putImageData(frames[frame],0,h/2);
	if (frame < max_frames){
	frame++;
}
else{
	frame = 0;
}
}
}
,33);
	return this;
}
}
)(jQuery);

CSS代码(demo.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)