红包照片效果

1.主要思路

分为两个图层，底层是一个高斯模糊的图片，上图是一个裁剪成圆的清晰图片

高斯模糊是使用CSS3的filter属性实现

逐渐显示清晰图的动画，是用JS的setInterval实现的。

2.Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>红包照片</title>
    <link href="blur.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="blur-div">
    <img id="blur-image" src="img.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 src="blur.js"></script>

</body>
</html>

3.Css

#blur-div {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    position: relative;

}

#blur-image {
    display: block;
    width: 800px;
    height: 600px;
    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;
}

#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:200px;
    bottom:20px;
    background-color: #058;
}
#reset-button:hover{
    background-color: #047;
}

#show-button{
    right:200px;
    bottom:20px;
    background-color: #085;
}
#show-button:hover{
    background-color: #074;
}

4.Js

/**
 * Created by yutianran on 2016/11/10.
 */
var canvasWidth = 800;
var canvasHeight = 600;
var radius = 50;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var anim =null;

canvas.width = canvasWidth;
canvas.height = canvasHeight;

var clippingRegion = {
    x: -1,
    y: -1,
    r: radius
};
var image = new Image();
image.src = "img.jpg";
image.onload = function () {
    initCanvas()
};

function initCanvas() {
    clippingRegion = {
        x: Math.random() * (canvasWidth - radius * 2) + radius,
        y: Math.random() * (canvasHeight - radius * 2) + radius,
        r: radius
    };
    draw(image);
}

function setClippingRegion(clippingRegion) {
    context.beginPath();
    context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false);
    context.clip();
}

function draw(image) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    setClippingRegion(clippingRegion);
    context.drawImage(image, 0, 0);
    context.restore();
}

function show() {
    // alert("show");
    anim = setInterval(
        function () {
            console.log(" clippingRegion.r=" + clippingRegion.r)
            clippingRegion.r += 20
            if (clippingRegion.r > Math.max(canvasWidth, canvasHeight) * 2) {
                clearInterval(anim)
            }
            draw(image, clippingRegion)
        },
        30
    )
}

function reset() {
    // alert("reset");
    if(anim!=null){
        clearInterval(anim)
    }
    initCanvas();
}