zoukankan      html  css  js  c++  java
  • 模糊效果小案例(canvas)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    	<style>
    	  *{
    	  	margin:0;
    	  	padding:0;
    	  }
    		#blue-div{
    			400px;
    			height:460px;
    			margin:0 auto;
    			position: relative;
    		}
    		#blue-image{
    			display:block;
    			400px;
    			height:460px;
    			margin:0 auto;
    			filter:blur(5px);
    			position: absolute;
    			left:0px;
    			top:0px;
    			z-index: 0;
    		}
    		#canvas{
    			display: block;
    			margin: 0  auto;
    			position: absolute;
    			left:0;
    			top:0;
    			z-index: 500;
    			/* background-color:red; */
    		}
    		.button{
    			display:block;
    			position: absolute;
    			z-index: 1000;
    			50px;
    			height:20px;
    			color:white;
    			text-decoration: none;
    			text-align: center;
    			line-height: 20px;
    			border-radius: 5px;
    		}
    		#reset-button{
    			left:100px;
    			bottom:10px;
    			background-color:#058;
    		}
    		#reset-button:hover{
    			background-color:#047;
    		}
    		#show-button{
    			right:100px;
    			bottom:10px;
    			background-color:#085;
    		}
    		#show-button{
    			background-color:#074;
    		}
    	</style>
    </head>
    <body>
    	<div id='blue-div'>
    		<img id='blue-image' src="luhan.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>
    	
    </body>
    <script>
    	var canvasWidth=400;
    	var canvasHeight=460;
    	var canvas=document.getElementById('canvas');
    	canvas.width=canvasWidth;
    	canvas.height=canvasHeight;
    	var ctx=canvas.getContext("2d");
    	var radius=20;
    	var clippingRegion={x:-1,y:1,r:radius};
    
    	var image=new Image();
    	image.src='luhan.jpg';
    	image.onload=function(e){
    		initCanvas()
    	}
    
    	function initCanvas(){
    		clippingRegion=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){
    		ctx.beginPath();
    		ctx.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r,0,2*Math.PI,true)
    		ctx.clip();
    	}
    	function draw(image,clippingRegion){
    		ctx.clearRect(0, 0,canvas.width,canvas.height);
    		ctx.save();
    		setClippingRegion(clippingRegion);
    		ctx.drawImage(image,0,0); 
    		ctx.restore();
    	}
    	function show(){
    		
    		var id=setInterval(function(){
    			clippingRegion.r+=20;
    			if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){
                clearInterval(id);
    			}
    			draw(image,clippingRegion);
    
    		}, 30)
    	}
    	function reset(){
    		initCanvas()
    	}
    </script>
    </html>
    

      

  • 相关阅读:
    分享memcache和memcached安装过程(转)
    ios画图总结
    mac os下通过命令行的方式编译c++代码并在xcode里引用
    ubuntu访问windows共享文件夹
    为iphone 及iphone simulator编译boost库
    ubuntu 11.10 x64 安装oracle 11gR2时碰到的问题及解决方法
    模拟器与真机下ffmpeg的编译方法(总结版)
    ios 在View里绘图
    memcached1.4.4在ubuntu下编译的注意事项
    Google Code 服务试用
  • 原文地址:https://www.cnblogs.com/luxiaoxiao/p/6490143.html
Copyright © 2011-2022 走看看