<!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. java 复习整理（四 String类详解）

    String 类详解   StringBuilder与StringBuffer的功能基本相同,不同之处在于StringBuilder是非线程安全的,而StringBuffer是线程安全的,因此效率上S ...

  2. 浅谈android Socket 通信及自建ServerSocket服务端常见问题

    摘  要:TCP/IP通信协议是可靠的面向连接的网络协议,它在通信两端各建立一个Socket,从而在两端形成网络虚拟链路,进而应用程序可通过可以通过虚拟链路进行通信.Java对于基于TCP协议的网络通 ...

  3. Android ANR 详解

    ANR简介 ANR,是“Application Not Responding”的缩写,即“应用程序无响应”.在Android中,ActivityManagerService(简称AMS)和Window ...

  4. 【IDEA】IDEA创建Maven的Web项目并运行以及打包

     0.IDEA集成Maven并设置Maven的配置 idea15之后的版本,都自带了maven插件,idea14貌似需要自己安装,方法也很简单:File->Settings->Plugin ...

  5. 为何url地址不是直接发送到服务器，而是被编码后再发送

    首先,先说一下,关于为何必须将url地址,去编码后,再发送,是因为相关的协议规范:RFC 1738,定义了url地址中不能包含除了0-9的数字,大小写字母(a-zA-Z),短横线’-‘ 之外的字母.换 ...

  6. AC日记——Mice and Holes codeforces 797f

    797F - Mice and Holes 思路: XXYXX: 代码: #include <cmath> #include <cstdio> #include <cst ...

  7. SQL 并发-转

    脏读.不可重复读  共享锁.悲观锁 和 事务五种隔离级别   一.脏读.不可重复读.幻读1.脏读:脏读就是指当一个事务正在访问数据,并且对数据进行了修改,而这种修改还没有提交到数据库中,这时,另外一个 ...

  8. (11)oracle触发器

    触发器是特殊的存储过程. 每当一个特定的数据操作语句(inster,update,delete)在指定的表上触发时,Oracle自动的地执行触发器中定义的语句序列. create trigger 触发 ...

  9. 51nod 1062 序列中最大的数【打表】

    1062 序列中最大的数 题目来源: Ural 1079 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 有这样一个序列a: a[0] = 0 a[ ...

  10. 51nod 1087 1 10 100 1000【打表】

    题目来源: Ural 1209 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 1,10,100,1000...组成序列1101001000...,求 ...