• 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;
    }
  • 相关阅读:
    三元组数据结构
    线性表的顺序表示和实现 数据结构
    【欧拉计划1】Multiples of 3 and 5
    strcmp()与strcmpi()函数 C语言
    指向函数的指针 C语言
    const限定符声明 C语言
    Java环境搭建与配置
    栈的C语言实现
    【欧拉计划2】Even Fibonacci numbers
    单链表的表示和实现 数据结构
  • 原文地址:https://www.cnblogs.com/mayufo/p/5187363.html
Copyright © 2020-2023  润新知