效果图
十余年的荣县网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。
全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整荣县建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“
荣县网站设计”,“
荣县网站推广”以来，每个客户项目都认真落实执行。
html结构(index.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);
}
创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。
网站名称：红包照片模糊效果-创新互联
转载注明：
http://cdkjz.cn/article/dsgsds.html
