<!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. yum升级kernel

    # uname -a Linux host -.el6.x86_64 # SMP Fri May :: BST x86_64 x86_64 x86_64 GNU/Linux # cat /etc/re ...

  2. Mysql性能优化【转】

    mysql的性能优化无法一蹴而就,必须一步一步慢慢来,从各个方面进行优化,最终性能就会有大的提升. Mysql数据库的优化技术 对mysql优化是一个综合性的技术,主要包括 表的设计合理化(符合3NF ...

  3. 汕头市队赛 SRM 08 B

    B-3 SRM 08 描述 给长度为 n 的数列 A 和长度为 m 的数列 B,问有多少长度为 m 的数列 C 满足 输入格式 第一行俩整数 n 和 m 第二行 n 个整数 ,表示数列 A 第三行 m ...

  4. [bzoj2111][ZJOI2010]Perm 排列计数 ——问题转换，建立数学模型

    题目大意 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic的,答案可能很 ...

  5. Log4Net日志分类和自动维护

    背景 在程序中,我们调试运行时信息,Log4Net是一个不错的解决方案.不知道是我用的不好,用到最后反而都不想看日志了.原因是因为我n个功能使用的默认的Logger来记录日志,这样以来,所有功能记录的 ...

  6. 插件 原生js 省市区 三级联动 源码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. mysql创建用户后无法登陆

    创建用户后登陆失败的原因是存在匿名用户: root@controller:~# mysql -h localhost -uaa -ppassword ERROR 1045 (28000): Acces ...

  8. ES6 - Babel编译环境搭建

    都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y  // ...

  9. Kubernetes控制节点安装配置

    #环境安装Centos 7 Linux release 7.3.1611网络: 互通配置主机名设置各个服务器的主机名hosts#查找kubernetes支持的docker版本Kubernetes v1 ...

  10. 关于python浮点数的精度问题。

    若想严格按照四舍五入进行,可使用Decimal,代码如下: from decimal import Decimal, ROUND_HALF_UP def round(x, n): return Dec ...