<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas catch red</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<link href="blur.css" rel="stylesheet" type="text/css">
<meta name="viewport"
content=" height = device-height,
width = device-width,
initial-scale = 1.0,
minimum-scale = 1.0,
maximum-scale = 1.0,
user-scalable = no"/>
</head>
<body>
<div id="blur-div">
<img id="blur-img" src="image.jpg">
<canvas id="canvas"></canvas>
<a id="rest-button" href="javascript:rest()" class="button">reset</a>
<a id="show-button" href="javascript:show()" class="button">show</a>
</div>
<script src="blur.js" type="text/javascript"></script>
</body>
</html>
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var image = new Image();
var radius = 50;
var clippingRegion = {x:400, y: 200, r:50};
var leftMargin = 0;
var topMargin = 0;
var timer = null;
image.src = "image.jpg";
image.onload = function (e){
$("#blur-div").css("width",canvasWidth+"px");
$("#blur-div").css("height",canvasHeight+"px");
$("#blur-img").css("width",image.width+"px");
$("#blur-img").css("height",image.height+"px");
leftMargin = (image.width - canvas.width)/2;
topMargin = (image.height - canvas.height)/2;
$("#blur-image").css("top",String(-topMargin)+"px");
$("#blur-image").css("left",String(-leftMargin)+"px");
initCanvas()
}
function initCanvas(){
var theLeft = leftMargin<0?-leftMargin:0;
var thetop = topMargin<0?-topMargin:0;
clippingRegion = { x: Math.random()*(canvas.width - 2*radius - 2*theLeft) + radius + theLeft,
y: Math.random()*(canvas.height - 2*radius - 2*thetop) + radius + thetop, r:radius };
draw(image, clippingRegion);
}
function setClippingRegion(clippingRegion){
context.beginPath();
context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI *2,false);
context.clip();
}
function draw(image, clippingRegion){
context.clearRect(0,0,canvas.width, canvas.height);
context.save();
setClippingRegion(clippingRegion);
context.drawImage( image,
Math.max(leftMargin,0),
Math.max(topMargin, 0),
Math.min(canvas.width,image.width), Math.min(canvas.height,image.height),
leftMargin<0?-leftMargin:0,
topMargin<0?-topMargin:0,
Math.min(canvas.width,image.width), Math.min(canvas.height,image.height) );
context.restore();
}
function rest(){
if( timer != null ){
clearInterval(timer)
timer = null
}
initCanvas()
};
function show(){
if(timer == null){
timer = setInterval(
function (){
clippingRegion.r +=20;
if(clippingRegion.r > 2*Math.max(canvas.width,canvas.height)){
clearInterval(timer);
}
draw(image,clippingRegion);
},30);
}
};
canvas.addEventListener("touchstart",function(e){
e.preventDefault()
});
*{
margin:0 0;
padding:0 0;
}
#blur-div{
overflow: hidden;;
margin:0 auto;
position: relative;
}
#blur-img{;
margin:0 auto;
display: block;
filter: blur(20px);
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-ms-filter: blur(20px);
-o-filter: blur(20px);
position: absolute;
top:0px;
left:0px;
z-index:0 ;
}
#canvas{
display: block;
margin:0 auto;
position: absolute;
left: 0px;
top:0px;
z-index: 100;
}
.button{
display:block;
position: absolute;
z-index: 200;
width:100px;
height:30px;
color: white;
text-decoration: none;
text-align: center;
line-height: 30px;
border-radius: 5px;
cursor: pointer;
}
#rest-button{
left:50x;
bottom: 20px;
background-color: #058;
}
#rest-button:hover{
background-color: #047;
}
#show-button{
right:50px;
bottom:20px;
background-color: #085;
}
#show-button:hover{
background-color: #074;
}