                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas玩兒轉(zhuǎn)紅包照片

效果展示～～

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8"?/>
<meta?http-equiv="X-UA-Compatible"?content="IE=edge"?/>
<meta?name="viewport"?content="width=device-width,?initial-scale=1"?/>
<title>Red?Packet</title>
<link?href="./../../_libs/animate/animate.css"?rel="stylesheet">
<link?href="../css/blur.css"?rel="stylesheet">
</head>
<body>
<div?id="blur-div">
<img?id="blur-image"?src="../images/e0f39278-f0f3-4e85-8eab-69ab725ac73d.jpg">
<canvas?id="canvas"></canvas>
<a?id="reset-button">RESET</a>
<a?id="auto-button">AUTO</a>
<a?id="show-button">SHOW</a>
</div>
<script?src="./../../_libs/jQuery/jquery-3.1.0.js"></script>
<script?src="../js/makeCenter.js"></script>
<script?src="../js/blur.js"></script>
<script>
$('#blur-div').makeCenter();
</script>
</body>
</html>

body?{
	margin:?0;
	padding:?0;
}
#blur-div?{
	width:?915px;
	height:?610px;
	margin:?0?auto;
	overflow:?hidden;
}
#blur-image?{
	display:?block;
	width:?100%;
	filter:?blur(30px);
	position:?absolute;
	top:?0;
	left:?0;
	z-index:?0;
}
#canvas?{
	display:?block;
	position:?absolute;
	top:?0;
	left:?0;
	z-index:?1;
	//?background-color:?rgba(255,?248,?0,?.5);
}

.button?{
	display:?block;
	position:?absolute;
	z-index:?2;
	width:?100px;
	height:?30px;
	color:?white;
	text-decoration:?none;
	text-align:?center;
	line-height:?30px;
	border-radius:?5px;
}
#reset-button?{
	left:?200px;
	bottom:?20px;
	background-color:?#058;
}
#reset-button:hover?{
	background-color:?#047;
}
#show-button?{
	right:?200px;
	bottom:?20px;
	background-color:?#085;
}
#show-button:hover?{
	background-color:?#074;
}
#auto-button?{
	left:?407px;
	bottom:?20px;
	background-color:?rgba(0,0,0,.1);
}
#auto-button:hover?{
	background-color:?rgba(0,0,0,.2);
}

-function(){
	'use?strict';

	let?imgW?=?$('#blur-div').width();
	let?imgH?=?$('#blur-div').height();

	let?canvas?=?document.querySelector('#canvas');
	let?context?=?canvas.getContext('2d');


	canvas.width?=?imgW;
	canvas.height?=?imgH;

	let?img?=?new?Image();
	let?clippingRegion?=?{?r:80?};
	let?timer?=?null;
	img.src?=?"../images/e0f39278-f0f3-4e85-8eab-69ab725ac73d.jpg";
	img.onload?=?function(e)?{
		initCanvas();
		triggerEvent();
	}

	function?initCanvas()?{
		clippingRegion?=?{
			x?:?(Math.random()*(imgW?-?2*clippingRegion.r))?+?clippingRegion.r,
			y?:?(Math.random()*(imgH?-?2*clippingRegion.r))?+?clippingRegion.r,
			r?:?80
		};
		draw(img,?clippingRegion);
	}

	function?draw(img,?clippingRegion)?{
		context.clearRect(0,?0,?canvas.width,?canvas.height);

		context.save();	//?save()和restore()存儲|釋放canvas的狀態(tài)
		setClippingRegion(clippingRegion);
		context.drawImage(img,?0,?0);
		context.restore();
	}

	function?setClippingRegion(clippingRegion)?{
		context.beginPath();
		context.arc(clippingRegion.x,?clippingRegion.y,?clippingRegion.r,?0,?2*Math.PI,?false);
		context.clip();
		//?由此生成一個剪輯區(qū)域，后續(xù)畫圖只能在剪輯區(qū)域進(jìn)行
		//?context.closePath();
	}

	function?triggerEvent()?{
		$('#blur-div').on('click',?".button",?function(e)?{
			e.preventDefault();
			if?(this.id?==?'reset-button')?{
				reset();
			}
			if?(this.id?==?'show-button')?{
				show();
			}
			if?(this.id?==?'auto-button')?{
				//?$(this).remove();
				auto();
			}
		});
	}

	function?reset()?{
		clearInterval(timer);
		initCanvas();
	}

	function?show()?{
		clearInterval(timer);
		clippingRegion?=?{?x:imgW/2,?y:imgH/2,?r:0?};
		timer?=?setInterval(function(){
			clippingRegion.r?+=?2;
			draw(img,?clippingRegion);
			if?(clippingRegion.r?>?1000)?{
				clearInterval(timer);
			}
		},?30);
	}

	function?auto()?{
		clearInterval(timer);
		timer?=?setInterval(function(){
			initCanvas();
		},?1000);
	}
}();