红包照片模糊效果

发布时间:2020-07-02 13:02:48 作者:素颜猪
来源:网络 阅读:349

效果图

红包照片模糊效果

红包照片模糊效果

红包照片模糊效果

html结构(index.html)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>红包照片</title>

<link rel="stylesheet" href="blur.css">

<script src="jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="blur-div">

<img id="blur-image" src="20170122161717.png" alt="">

<canvas id="blur-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 src="blur.js" type="text/javascript" charset="utf-8" ></script>

</body>

</html>

css样式(blur.css)

#blur-div{

width: 600px;

height: 450px;

margin: 0 auto;

position: relative;

}



#blur-image{

display: block;

width: 600px;

height: 450px;

margin: 0 auto;


filter:blur(20px);

-webkit-filter:blur(20px);

-moz-filter:blur(20px);

-ms-filter:blur(20px);

-o-filter:blur(20px);


position: absolute;

left: 0px;

top: 0px;

z-index: 0;

}



#blur-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;

}


#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;

}

js脚本(blur.js)

var canvasWidth = 600;

var canvasHeight = 450;


var canvasObj = document.getElementById("blur-canvas");


var contextObj = canvasObj.getContext("2d");


canvasObj.width = canvasWidth;

canvasObj.height = canvasHeight;


var imageObj = new Image();

var radius = 50;

var clippingRegion = {x:200,y:100,r:radius}


imageObj.src = "20170122161717.png";

imageObj.onload = function(e){

initCanvas();

}



function initCanvas(){

var rx = Math.random()*(canvasObj.width - 2*radius)+radius;

var ry = Math.random()*(canvasObj.height - 2*radius)+radius;

clippingRegion = {x:rx,y:ry,r:radius};

drawImage(imageObj,clippingRegion);

}



function drawImage(imageObj,clippingRegion){

contextObj.clearRect(0,0,canvasObj.width,canvasObj.height);


contextObj.save();

setClippingRegion(clippingRegion);

contextObj.drawImage(imageObj,0,0);

contextObj.restore();

}



function setClippingRegion(clippingRegion){

contextObj.beginPath();

contextObj.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,Math.PI*2,false);

contextObj.clip();

}



function reset(){

initCanvas();

}



function show(){

document.getElementById("reset-button").style.display="none";

var animation = setInterval(function(){

clippingRegion.r += 20;

if (clippingRegion.r > 2*Math.max(canvasObj.width,canvasObj.height)) {

clearInterval(animation);

document.getElementById("reset-button").style.display="block";

}

drawImage(imageObj,clippingRegion);

},30);

}

红包照片模糊效果

推荐阅读:
  1. canvas实现的红包照片自适应效果
  2. Canvas如何实现微信红包照片效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

红包照片 模糊效果

上一篇:Objective-C之字符串对象

下一篇:Android:结合远程控制来解决安卓问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》