<!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. NFS排错案例

    1.检验rpcinfo从客户端 # rpcinfo -p nfsserverip ,可以看到服务器端开的tcp/udp端口.默认都是打开的,客户端可以自己选择使用TCP/UDP program ver ...

  2. 基于node的cmd迷你天气查询工具

    1.前几天网上看到的,于是自己小改了一下,更换了天气查询的接口,当作练习一下node. 2.收获挺大的,捣鼓了一天,终于学会了发布npm包. 3.接下来,就介绍一下这个 mini-tianqi 的主要 ...

  3. php实现二维码

    封装函数 function verifyImage($len=3){ //session_start(); $scr="abcdefghijklmnoqprstuvwxyzABCDEFJHI ...

  4. python module ：shelve

    shelve 是一个 key-value 的数据库. 操作方法和字典几乎一致. shelve 模块功能:以 key - value 的方式存储数据. 写数据 >>> import s ...

  5. 分享一下我写的.net 2.0的orm类，实现mvc。可以用于webform等环境中，这是orm的原理部分。

    using System;using System.Collections.Generic;using System.Configuration;using System.Data;using Sys ...

  6. zepto.js 自定义打包集成其他模块构建流程

    1.首先在自己的电脑上要安装Node.js和npm包管理工具: 2.从github上下载zepto.js的源文件包到本地磁盘(例如:E:\Learning\JS): 地址:https://github ...

  7. 小红帽的画笔(NOIP模拟赛Round 7)

    又到了神奇的模拟赛时间~ 真是丧~ 好吧我们来看看题目 小红帽是Pop star上最著名的人类画家,她可以将任何画出的东西变成真实的物品.赋予她这样神奇能力的正是她手上的画笔. 小红帽每次作画时,都需 ...

  8. UVA 10205 Stack 'em Up

    直接模拟就好. #include <map> #include <set> #include <list> #include <cmath> #incl ...

  9. 多线程之：java线程创建

    java中创建线程有两种方式: 1.继承Thread类,重写run()方法,如: public class MyThread extends Thread { public void run(){ S ...

  10. Appium+python自动化10-AVD 模拟器【转载】

    前言 有些小伙伴没android手机,这时候可以在电脑上开个模拟器玩玩 一.模拟器配置 1.双击启动AVD Manager,进入配置界面