1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>canvas catch red</title>
  7.     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  8.     <link href="blur.css" rel="stylesheet" type="text/css">
  9.     <meta name="viewport"
  10.           content=" height = device-height,
  11.                     width = device-width,
  12.                     initial-scale = 1.0,
  13.                     minimum-scale = 1.0,
  14.                     maximum-scale = 1.0,
  15.                     user-scalable = no"/>
  16. </head>
  17. <body>
  18.     <div id="blur-div">
  19.         <img id="blur-img" src="data:image.jpg">
  20.         <canvas id="canvas"></canvas>
  21.         <a id="rest-button" href="javascript:rest()" class="button">reset</a>
  22.         <a id="show-button" href="javascript:show()" class="button">show</a>
  23.     </div>
  24.     <script src="blur.js" type="text/javascript"></script>
  25. </body>
  26. </html>

　　

  1. var canvasWidth = window.innerWidth;
  2. var canvasHeight = window.innerHeight;
  3.  
  4. var canvas = document.getElementById("canvas");
  5. var context = canvas.getContext("2d");
  6.  
  7. canvas.width = canvasWidth;
  8. canvas.height = canvasHeight;
  9.  
  10. var image = new Image();
  11. var radius = 50;
  12. var clippingRegion = {x:400, y: 200, r:50};
  13. var leftMargin = 0;
  14. var topMargin = 0;
  15. var timer = null;
  16. image.src = "image.jpg";
  17.  
  18. image.onload = function (e){
  19.     $("#blur-div").css("width",canvasWidth+"px");
  20.     $("#blur-div").css("height",canvasHeight+"px");
  21.  
  22.     $("#blur-img").css("width",image.width+"px");
  23.     $("#blur-img").css("height",image.height+"px");
  24.  
  25.     leftMargin = (image.width - canvas.width)/2;
  26.     topMargin = (image.height - canvas.height)/2;
  27.  
  28.     $("#blur-image").css("top",String(-topMargin)+"px");
  29.     $("#blur-image").css("left",String(-leftMargin)+"px");
  30.  
  31.     initCanvas()
  32. }
  33.  
  34. function initCanvas(){
  35.     var theLeft = leftMargin<0?-leftMargin:0;
  36.     var thetop = topMargin<0?-topMargin:0;
  37.     clippingRegion = { x: Math.random()*(canvas.width - 2*radius - 2*theLeft) + radius + theLeft,
  38.                        y: Math.random()*(canvas.height - 2*radius - 2*thetop) + radius + thetop, r:radius };
  39.     draw(image, clippingRegion);
  40. }
  41.  
  42. function setClippingRegion(clippingRegion){
  43.     context.beginPath();
  44.     context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI *2,false);
  45.     context.clip();
  46. }
  47.  
  48. function draw(image, clippingRegion){
  49.     context.clearRect(0,0,canvas.width, canvas.height);
  50.  
  51.     context.save();
  52.     setClippingRegion(clippingRegion);
  53.     context.drawImage( image,
  54.         Math.max(leftMargin,0),
  55.         Math.max(topMargin, 0),
  56.         Math.min(canvas.width,image.width), Math.min(canvas.height,image.height),
  57.         leftMargin<0?-leftMargin:0,
  58.         topMargin<0?-topMargin:0,
  59.         Math.min(canvas.width,image.width), Math.min(canvas.height,image.height) );
  60.     context.restore();
  61. }
  62.  
  63. function rest(){
  64.  
  65. if( timer != null ){
  66.         clearInterval(timer)
  67.         timer = null
  68.     }
  69.     initCanvas()
  70. };
  71. function show(){
  72.    if(timer == null){
  73.    	timer = setInterval(
  74. 	function (){
  75.         clippingRegion.r +=20;
  76.        if(clippingRegion.r > 2*Math.max(canvas.width,canvas.height)){
  77.            clearInterval(timer);
  78.        }
  79.         draw(image,clippingRegion);
  80.     },30);
  81.  
  82.    }
  83.  
  84. };
  85.  
  86. canvas.addEventListener("touchstart",function(e){
  87.     e.preventDefault()
  88. });

　　

  1. *{
  2.     margin:0 0;
  3.     padding:0 0;
  4. }
  5.  
  6. #blur-div{
  7.     overflow: hidden;;
  8.     margin:0 auto;
  9.     position: relative;
  10.  
  11. }
  12.  
  13. #blur-img{;
  14.     margin:0 auto;
  15.     display: block;
  16.  
  17.     filter: blur(20px);
  18.     -webkit-filter: blur(20px);
  19.     -moz-filter: blur(20px);
  20.     -ms-filter: blur(20px);
  21.     -o-filter: blur(20px);
  22.  
  23.     position: absolute;
  24.     top:0px;
  25.     left:0px;
  26.  
  27.     z-index:0 ;
  28. }
  29.  
  30. #canvas{
  31.     display: block;
  32.     margin:0 auto;
  33.  
  34.     position: absolute;
  35.     left: 0px;
  36.     top:0px;
  37.  
  38.     z-index:;
  39.  
  40. }
  41.  
  42. .button{
  43.     display:block;
  44.     position: absolute;
  45.     z-index:;
  46.  
  47.     width:100px;
  48.     height:30px;
  49.  
  50.     color: white;
  51.     text-decoration: none;
  52.     text-align: center;
  53.     line-height: 30px;
  54.  
  55.     border-radius: 5px;
  56.     cursor: pointer;
  57.  
  58. }
  59.  
  60. #rest-button{
  61.     left:50x;
  62.     bottom: 20px;
  63.     background-color: #058;
  64. }
  65.  
  66. #rest-button:hover{
  67.     background-color: #047;
  68. }
  69.  
  70. #show-button{
  71.     right:50px;
  72.     bottom:20px;
  73.     background-color: #085;
  74. }
  75.  
  76. #show-button:hover{
  77.     background-color: #074;
  78. }

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. bzoj 2671 莫比乌斯反演

    Calc Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 451  Solved: 234[Submit][Status][Discuss] Descr ...

  2. Java并发笔记（一）

    1. lock (todo) 2. 写时复制容器 CopyOnWrite容器即写时复制的容器.通俗的理解是当我们往一个容器添加元素的时候,不直接往当前容器添加,而是先将当前容器进行Copy,复制出一个 ...

  3. 日志组件Log4Net

    <?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...

  4. number(NOIP模拟赛Round 3)

    好吧,神奇的题目.. 原题传送门 这道题目,神奇的字符单调栈.. 首先预处理出1~n个数(大家都会.) 然后塞进字符串里,输出答案(水~) 然后.. 我们需要将所有的字符存入单调栈中,然后乱搞,就可以 ...

  5. ES6 - Babel编译环境搭建

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

  6. 应用程序已被Java安全阻止

    提示 您的安全设置已阻止自签名的应用程序运行 控制面板-JAVA-安全-例外站点-https://域名或IP/或http://域名或IP/,注意结尾必须要加/否则还是会一直提示被阻止

  7. Python学习杂记_12_函数（三）

    内置函数 Python有很多内置函数,以下这些是常用且必须要掌握的: 强制类型转换: bool() # 把一个对象转换成布尔类型 int() # 整形 float() # 小数 str() # 字符 ...

  8. 【bugfree】安装

    我用的是WIN8系统 首先要安装XAMPP,开始里面的Apache和MySQL服务. 在运行Apache服务时报错: ----------------------------------------- ...

  9. NYOJ16 矩形嵌套 【DAG上的DP/LIS】

    矩形嵌套 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a<c ...

  10. POJ 1741 Tree 树的分治

    原题链接:http://poj.org/problem?id=1741 题意: 给你棵树,询问有多少点对,使得这条路径上的权值和小于K 题解: 就..大约就是树的分治 代码: #include< ...