标签：
<!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; }
标签：
原文地址：http://www.cnblogs.com/mayufo/p/5187363.html
