<!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. Windows Server 创建环回网卡

    1.以管理员身份运行cmd后,在cmd命令窗口中执行:hdwwiz 启动硬件添加向导. 2.在添加硬件向导中选择手动安装或自动搜索都可以.然后选择网络适配器. 3.选择网络适配器:厂商选择Micros ...

  2. OI 知识体系

    OI Training 知识体系结构 初级 1.1 C语言基础 1.1.1 C语言程序结构(A+B Problem) 1.1.2 变量,常量,数据类型,输入与输出 1.1.3 条件语句 1.1.4 循 ...

  3. C# 代码片段

    StringBuilder拼接小技巧 Stopwatch watch = new Stopwatch(); watch.Start(); var sb = new StringBuilder(); ; ...

  4. C语言中函数strcpy ,strncpy ,strlcpy的用法【转】

    转自:http://blog.chinaunix.net/uid-20797562-id-99311.html strcpy ,strncpy ,strlcpy的用法好多人已经知道利用strncpy替 ...

  5. Linux内核内存管理-内存访问与缺页中断【转】

    转自:https://yq.aliyun.com/articles/5865 摘要: 简单描述了x86 32位体系结构下Linux内核的用户进程和内核线程的线性地址空间和物理内存的联系,分析了高端内存 ...

  6. (二十二)函数fseek() 用法

    fseek 函数名: fseek功 能: 重定位流上的文件指针用 法: int fseek(FILE *stream, long offset, int fromwhere);描 述: 函数设置文件指 ...

  7. PDF工具

    PDF打印工具 pdfcreator 可以将所有文件都打印为pdf PDF 阅读-编辑-打印工具 Adobe Acrobat DC 可以将所有文件都打印为pdf,并且支持编辑PDF与阅读,可以将PDF ...

  8. Linux 根据组来划分账号,根据部门同一账号的组,同一组下拥有同一权限

    #新机器添加 #创建部门组与账号 useradd testgroup #创建员工账号加入到部门组里 useradd -g testgroup user1 #员工在/data目录下创建的默认权限为774 ...

  9. ()C# DataRow

    判断某列是否存在,返回bool dr.Table.Columns.Contains("水分含量")

  10. Codeforces Round #321 (Div. 2) A. Kefa and First Steps【暴力/dp/最长不递减子序列】

    A. Kefa and First Steps time limit per test 2 seconds memory limit per test 256 megabytes input stan ...