demo3.html

﻿<!DOCTYPE html>
<html>
<style>
*{
	margin: 0;
	padding: 0;
}

#blur-wrap{
	position: relative;
	width: 320px;
	height: 520px;
	margin:0 auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;.
}

#blur-img{
	position: absolute;
	left:0;
	top:0;
	z-index: 0;
}


#blur-canvas{
	position: absolute;
	left:0;
	top:0;
	z-index: 100;
}

#reset{
	position: absolute;
	left:40px;
	bottom: -80px;
	background: #1165cd;
}

#mosaic{
	position: absolute;
	right:50px;
	bottom: -80px;
	background: #5d61cc;
}

#reset:hover,#show:hover{
	background: #9861cc;
}


button{
	width: 70px;
	height: 30px;
	line-height: 30px;
	border-radius: 10px;
	border: none;
	color: white;
	outline: none;
}

button:hover{
	cursor: pointer;
}

</style>
<body>
<div id="blur-wrap">
    <canvas id="blur-canvas">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
    <button id="reset" onclick="reset()">复原</button>
    <button id="mosaic" onclick="mosaic(0,0,320,510)">马赛克</button>
</div>
<script src="jquery.js"></script>
<script src="demo3.js"></script>
</body>
</html>