点击 SHOW: 显示完整清晰图片;
点击 RESET: 随机显示剪辑区域;
index.html
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title></title>
- <script type="text/JavaScript" src="https://code.jQuery.com/jQuery-3.1.1.min.JS"></script>
- <style type="text/CSS">
- #blur_div{
- width: 500px;
- height: 334px;
- margin: 0 auto;
- position: relative;
- margin-top:100px;
- }
- #blur_img{
- display: block;
- width: 500px;
- height: 334px;
- margin: 0 auto;
- filter: blur(15px);/*CSS3 模糊 */
- -webkit-filter: blur(15px);
- -moz-filter: blur(15px);
- -ms-filter: blur(15px);
- -o-filter: blur(15px);
- position:absolute;
- left: 0px;
- top: 0px;
- z-index: 0;
- }
- #canvas{
- display: block;
- margin: 0 auto;
- position:absolute;
- left: 0px;
- top: 0px;
- z-index: 100;
- /* background-color:red;*/
- }
- .button{
- display:block;
- position:absolute;
- z-index:200;
- width:80px;
- height:30px;
- color:white;
- text-decoration:none;
- text-align:center;
- line-height:30px;
- border-radius:5px;
- }
- #reset_button{
- left:100px;
- bottom:20px;
- background-color:#058;
- }
- #reset_button:hover{
- background-color:#047;
- }
- #show_button{
- right:100px;
- bottom:20px;
- background-color:#085;
- }
- #show_button:hover{
- background-color:#074;
- }
- </style>
- </head>
- <body>
- <div id="blur_div">
- <img id="blur_img" src="http://cdn.attach.qdfuns.com/notes/pics/201702/27/221935e35ugwllljg10912.jpg" />
- <canvas id="canvas"></canvas>
- <a href="JavaScript:reset()" class="button" id="reset_button">RESET</a>
- <a href="JavaScript:show()" class="button" id="show_button">SHOW</a>
- </div>
- <script>
- var canvasWidth = 500;
- var canvasHeight = 334;
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- canvas.width = canvasWidth;
- canvas.height = canvasHeight;
- /* 在 canvas 上绘制清晰的图片 */
- var image = new Image();
- var radius = 40;
- var clippingRegion = {x:-1,y:-1,r:radius};/* 初始化剪辑区域 */
- image.src = "http://cdn.attach.qdfuns.com/notes/pics/201702/27/221935e35ugwllljg10912.jpg";
- image.onload = function(e){
- initCanvas();
- }
- function initCanvas(){
- clippingRegion = {x:Math.random()*(canvas.width-2*radius)+radius,
- y:Math.random()*(canvas.height-2*radius)+radius,
- r:radius};/* 随机剪辑区域 */
- draw(image,clippingRegion);
- }
- function setClippingRegion(clippingRegion){
- context.beginPath();
- context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,2*Math.PI,false);/* 绘制剪辑区域的路径 */
- context.clip();
- }
- function draw(image,clippingRegion){
- context.clearRect(0,0,canvas.width,canvas.height);/* 清除画布 */
- context.save();
- setClippingRegion(clippingRegion);/* 重新设置剪辑区域 */
- context.drawImage(image,0,0);
- context.restore();
- }
- /* 重置显示剪辑区域 */
- function reset(){
- initCanvas();
- }
- /* 显示整个清晰图片 */
- function show(){
- var theAnimation = setInterval(
- function(){
- clippingRegion.r += 20;
- if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){
- clearInterval(theAnimation);
- }
- draw(image,clippingRegion);
- },20)
- }
- </script>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/39965/04203e7b619bbd8a2e151c8599030160.html