效果圖

十余年的榮縣網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整榮縣建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“榮縣網(wǎng)站設(shè)計”,“榮縣網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

html結(jié)構(gòu)(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);

}

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

網(wǎng)站標(biāo)題：紅包照片模糊效果-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/dsgsds.html