canvas实现红包照片的效果

2018-04-08 本文已影响0人伯纳乌的追风少年

image.png

如图所示，照片被高斯模糊处理了，只留下一小块清晰区域，
当点击show按钮后，照片全部变为清晰，
点击reset按钮后，照片又变成高斯模糊的样子，每次点击reset的时候，产生的清晰区域的位置都不一样。
代码如下：
主文件：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
                content="height=device-height,
                                    width=device-width,
                                    initial-scale=1.0,
                                    minimum-scale=1.0,
                                    maximum-scale=1.0,
                                    user-scalable=no"/>
    <title>Canvas玩转红包照片</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <link rel="stylesheet" href="blur.css">
</head>
<body>
    <div id="blur-div">
        <img id="image" src="banner.jpg" alt="">    
        <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>
        var canvasWidth=window.innerWidth;
        var canvasHeight=window.innerHeight;
        var canvas=document.getElementById("canvas")
        var context=canvas.getContext("2d")
        canvas.width=canvasWidth
        canvas.height=canvasHeight
        var radius=50;
        var theAnimation 
        var image=new Image()
        var clippingRegion={
            x:400,
            y:200,
            r:radius
        }

        var leftMargin=0;
        var topMargin=0;

        image.src='banner.jpg'
        image.onload=function(){
            $("#blur-div").css("width",canvasWidth+"px")
            $("#blur-div").css("height",canvasHeight+"px")

            $("#image").css("width",image.width+"px")
            $("#image").css("height",image.height+"px")
            leftMargin=(image.width-canvas.width)/2
            topMargin=(image.height-canvas.height)/2
            $("#image").css("top",String(-topMargin)+"px")
            $("#image").css("left",String(-leftMargin)+"px")
            initCanvas()
        }
        function initCanvas(){
            clippingRegion={
                x:radius+Math.random()*(canvas.width-2*radius),
                y:radius+Math.random()*(canvas.height-2*radius),
                r:radius
            }
            draw(image,clippingRegion)
        }
        function setClippingRegion(clippingRegion){
            context.beginPath()
            context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,Math.PI*2,false)
            context.clip()//内容只在剪辑区域中显示
        }


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

        function show(){
            
            theAnimation = setInterval(function(){
                    if(clippingRegion.r<=2*Math.max(canvas.width,canvas.height)){
                        clippingRegion.r+=10
                        draw(image,clippingRegion)
                    }else{
                        clearInterval(theAnimation)
                    }
                    
                },30)
        }

        function reset(){
            clearInterval(theAnimation)
            initCanvas()
        }

        canvas.addEventListener("touchstart",function(e){
            e.preventDefault()
        })


    </script>
</body>
</html>

样式文件：blur.css

*{
    margin:0;
    padding: 0;
}

#blur-div{
    margin:0 auto;
    position: relative;
    overflow: hidden;
}

#canvas{
    display: block;
    margin:0 auto;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 100;
    /*background: #f00;*/
}

#image{
    display: block;
    margin:0 auto;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
    filter: blur(10px);

    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
}

.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: 50px;
    bottom:20px;
    background-color: #058;
}

#reset-button:hover{
    background-color: #047;
}

#show-button{
    right: 50px;
    bottom:20px;
    background-color: #085;
}

#show-button:hover{
    background-color: #074;
}

背景照片：banner.jpg

banner.jpg

项目目录：

canvas实现红包照片的效果

猜你喜欢

热点阅读