效果展示～～-慕课网

效果展示～～

来源：3-4 动画效果

ThinkSummer

2017-07-02 20:28

<!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的状态
		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();
		// 由此生成一个剪辑区域，后续画图只能在剪辑区域进行
		// 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);
	}
}();