zoukankan      html  css  js  c++  java
  • demo 微信毛玻璃效果



    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas catch red</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <link href="blur.css" rel="stylesheet" type="text/css"> <meta name="viewport" content=" height = device-height, width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/> </head> <body> <div id="blur-div"> <img id="blur-img" src="image.jpg"> <canvas id="canvas"></canvas> <a id="rest-button" href="javascript:rest()" class="button">reset</a> <a id="show-button" href="javascript:show()" class="button">show</a> </div> <script src="blur.js" type="text/javascript"></script> </body> </html>

      

    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 image = new Image();
    var radius = 50;
    var clippingRegion = {x:400, y: 200, r:50};
    var leftMargin = 0;
    var topMargin = 0;
    var timer = null;
    image.src = "image.jpg";
    
    image.onload = function (e){
        $("#blur-div").css("width",canvasWidth+"px");
        $("#blur-div").css("height",canvasHeight+"px");
    
        $("#blur-img").css("width",image.width+"px");
        $("#blur-img").css("height",image.height+"px");
    
        leftMargin = (image.width - canvas.width)/2;
        topMargin = (image.height - canvas.height)/2;
    
        $("#blur-image").css("top",String(-topMargin)+"px");
        $("#blur-image").css("left",String(-leftMargin)+"px");
    
        initCanvas()
    }
    
    function initCanvas(){
        var theLeft = leftMargin<0?-leftMargin:0;
        var thetop = topMargin<0?-topMargin:0;
        clippingRegion = { x: Math.random()*(canvas.width - 2*radius - 2*theLeft) + radius + theLeft,
                           y: Math.random()*(canvas.height - 2*radius - 2*thetop) + radius + thetop, 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,
            Math.max(leftMargin,0),
            Math.max(topMargin, 0),
            Math.min(canvas.width,image.width), Math.min(canvas.height,image.height),
            leftMargin<0?-leftMargin:0,
            topMargin<0?-topMargin:0,
            Math.min(canvas.width,image.width), Math.min(canvas.height,image.height) );
        context.restore();
    }
    
    function rest(){
    	
    if( timer != null ){
            clearInterval(timer)
            timer = null
        }	
        initCanvas()
    };
    function show(){
       if(timer == null){
       	timer = setInterval(
    	function (){
            clippingRegion.r +=20;
           if(clippingRegion.r > 2*Math.max(canvas.width,canvas.height)){
               clearInterval(timer);
           }
            draw(image,clippingRegion);
        },30);
       
       
       }
       
    };
    
    
    
    canvas.addEventListener("touchstart",function(e){
        e.preventDefault()
    });
    

      

    *{
        margin:0 0;
        padding:0 0;
    }
    
    #blur-div{
        overflow: hidden;;
        margin:0 auto;
        position: relative;
    
    }
    
    #blur-img{;
        margin:0 auto;
        display: block;
    
        filter: blur(20px);
        -webkit-filter: blur(20px);
        -moz-filter: blur(20px);
        -ms-filter: blur(20px);
        -o-filter: blur(20px);
    
        position: absolute;
        top:0px;
        left: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;
        cursor: pointer;
    
    }
    
    #rest-button{
        left:50x;
        bottom: 20px;
        background-color: #058;
    }
    
    #rest-button:hover{
        background-color: #047;
    }
    
    #show-button{
        right:50px;
        bottom:20px;
        background-color: #085;
    }
    
    #show-button:hover{
        background-color: #074;
    }
  • 相关阅读:
    windows的80端口被占用时的处理方法
    Ansible自动化运维工具安装与使用实例
    Tomcat的测试网页换成自己项目首页
    LeetCode 219. Contains Duplicate II
    LeetCode Contest 177
    LeetCode 217. Contains Duplicate
    LeetCode 216. Combination Sum III(DFS)
    LeetCode 215. Kth Largest Element in an Array(排序)
    Contest 176 LeetCode 1354. Construct Target Array With Multiple Sums(优先队列,递推)
    Contest 176
  • 原文地址:https://www.cnblogs.com/mayufo/p/5187363.html
Copyright © 2011-2022 走看看