<!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="data: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:;

}

.button{

    display:block;

    position: absolute;

    z-index:;

    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;

}

demo 微信毛玻璃效果的更多相关文章

  1. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  2. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  3. iOS 实现毛玻璃效果

    话说苹果在iOS7.0之后,很多系统界面都使用了毛玻璃效果,增加了界面的美观性,比如下图的通知中心界面; 但是其iOS7.0的SDK并没有提供给开发者实现毛玻璃效果的API,所以很多人都是通过一些别人 ...

  4. CSS技巧收集——毛玻璃效果

    先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...

  5. 使用UIVisualEffectView创建毛玻璃效果

    UIVisuaEffectView :继承自UIView,可以看成是专门用于处理毛玻璃效果的视图,只要我们将这个特殊的View添加到其他视图(eg. ImageView )上面,被该UIVisuaEf ...

  6. CSS 奇思妙想 | 全兼容的毛玻璃效果

    通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...

  7. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  8. 解决css3毛玻璃效果(blur)有白边问题

    做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: <body> <div class="login-wrap"> <div class= ...

  9. Swift 之模糊效果（毛玻璃效果，虚化效果）的实现

    前言: 之前项目中有用到过Objective-C的的模糊效果,感觉很是不错,而且iOS8之后官方SDK也直接提供了可以实现毛玻璃效果的三个类:UIBlurEffect.UIVibrancyEffect ...

随机推荐

  1. jquery 的ajax

    一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...

  2. 转：ListView中getView的工作原理

    ListView中getView的工作原理: [1]ListView asks adapter “give me a view” (getView) for each item of the list ...

  3. lca板子

    #include<cstdio> #include<cstring> #include<algorithm> #define LL long long using ...

  4. HTML中打开新页面的方法

    HTML跳转新窗口的方法 笔试遇到这样的一个问题,特意整理一下. 方法一 纯HTML <a href="http://www.cnblogs.com" target=&quo ...

  5. fork+exec 与system，popen区别

    1.fork + exec fork用来创建一个子进程.一个程序一调用fork函数,系统就为一个新的进程准备了前述三个段,首先,系统让新的进程与旧的进程使用同一个代码段,因为它们的程序还是相同的,对于 ...

  6. 爬虫练习二：GUI+下载百思不得姐网站视频

    环境 python2.7 pycharm 课题:Python爬取视频(桌面版)---爬虫,桌面程序应用 优点:语法简洁,入门快,代码少,开发效率高,第三方库 1.图形用户界面---GUI 2.爬虫,爬 ...

  7. python tips;matplotlib 显示中文

    import numpy as npimport matplotlib.pyplot as pltimport matplotlib as mpl mpl.rcParams['axes.unicode ...

  8. 【转载】使用 PIVOT 和 UNPIVOT

    可以使用 PIVOT 和 UNPIVOT 关系运算符将表值表达式更改为另一个表.PIVOT 通过将表达式某一列中的唯一值转换为输出中的多个列来旋转表值表达式,并在必要时对最终输出中所需的任何其余列值执 ...

  9. ef code first commad

    PM> enable-migrations 已在项目“EasyWeChat.Data”中启用迁移.若要覆盖现有迁移配置,请使用 -Force 参数. PM> add-migration 位 ...

  10. asp.net core 身份认证/权限管理系统简介及简单案例

    如今的网站大多数都离不开账号注册及用户管理,而这些功能就是通常说的身份验证.这些常见功能微软都为我们做了封装,我们只要利用.net core提供的一些工具就可以很方便的搭建适用于大部分应用的权限管理系 ...