<!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; }