CSS3相关属性：

<!DOCTYPE html>

<html>

<head lang='en'>

     <meta charset='UTF-8'/>

     <meta name='viewport' content='height=device-height,

                                    width=device-width,

                                    initial-scale= 1.0,

                                    minimum-scale= 1.0,

                                    maximum-scale= 1.0,

                                    user-scale= no' />

     <title>canvas玩转微信红包</title>

     <script src='jquery-1.10.2.min.js' type='text/javascript'></script>

     <style>

     *{

       padding:0px;

       margin:0px;

     }

     #blur-div{

        width: 620px;

        height: 350px;

        position: relative;

        margin: 0 auto;

     }

     #blur-image{

        width: 620px;

        height: 350px;

        display: block;

        margin: 0 auto;

        filter: blur(5px); /*grayscale（灰度）/sepia（黄棕色）/saturate（饱和度）/hue-rotate（色相）/invert（反色）/opacity（不透明度）/brightness（明度）/contrast/（对比度）blur（模糊）/drop-shadow（阴影）*/

        -webkit-filter: blur(5px);

        -moz-filter: blur(5px);

        -ms-filter: blur(5px);

        -o-filter: blur(5px);

        position: absolute;

        left: 0px;

        top: 0px;

        z-index: 0;

     }

     #canvas{

        display: block;

        margin: 0 auto;

        position: absolute;

        left：0px;

        top: 0px;

        z-index: 100;

        //background-color: red;

     }

     .button{

         display: block;

         position: absolute;

         z-index: 200;

         width: 100px;

         height: 30px;

         color: white;

         text-decoration: none;

         text-align: center;

         line-height: 30px;

         border-radius: 5px;

     }

     #reset-button{

        left: 200px;

        bottom: 20px;

        background-color: #085;

     }

     #show-button{

        left: 400px;

        bottom: 20px;

        background-color: #074;

     }

     </style>

</head>

<body>

   <div id='blur-div'>

       <img id='blur-image' src='image.jpg'/>

       <canvas id='canvas'></canvas>

       <a href='javascript:reset()' class='button' id='reset-button'>RESET</a>

       <a href='javascript:show()' class='button' id='show-button'>SHOW</a>

   </div>

   <script type='text/javascript'>

      var canvasWidth = 620; //window.innerWidth

      var canvasHeight = 350; //window.innerHeight

      var canvas = document.getElementById('canvas');

      var context = canvas.getContext('2d');

      canvas.width = canvasWidth;

      canvas.height = canvasHeight;

      var image = new Image();

      var clippingRegion = {x: -1, y: -1, r: 30};

      image.src = 'image.jpg';

      image.onload = function(e){

           initCanvas();

      }

      function initCanvas(){

           clippingRegion = {x: Math.random()*600, y: Math.random()*300, r: 30};

           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,0,0);

          context.restore();

      }

      function reset(){

        initCanvas();

      }

      function show(){

        var tip = setInterval(function(){

             clippingRegion.r += 20;

             if(clippingRegion.r> Math.max(canvas.width,canvas.height)){

                 clearInterval(tip);

             }

             draw(image, clippingRegion);console.log('hahah');

         },30);

      }

   </script>

</body>

</html>

（最后效果如上：）

canvas玩转微信红包的更多相关文章

  1. 基于微信红包插件的原理实现android任何APP自动发送评论（已开源）

    背景 地址:https://github.com/huijimuhe/postman 核心就是android的AccessibilityService,回复功能api需要23以上版本才行. 其实很像在 ...

  2. 微信红包中使用的技术:AA收款+随机算法

    除夕夜你领到红包了吗?有的说“我领了好几K!”“我领了几W!” 土豪何其多,苦逼也不少!有的说“我出来工作了,没压岁钱了,还要发红包”.那您有去抢微信红包吗?微信群中抢“新年红包”春节爆红.618微信 ...

  3. （实用篇）php官方微信接口大全（微信支付、微信红包、微信摇一摇、微信小店）

    微信入口绑定,微信事件处理,微信API全部操作包含在这些文件中.内容有:微信摇一摇接口/微信多客服接口/微信支付接口/微信红包接口/微信卡券接口/微信小店接口/JSAPI <?php class ...

  4. 对接微信红包时：CA证书出错，请登录微信支付商户平台下载证书

    今天在对接微信支付的微信红包发放时,出现““CA证书出错,请登录微信支付商户平台下载证书”的错误,特此记录一下: 如果你也在对接微信红包,并且你也在这个页面上下载了demo,再就是你也参照了里面的文档 ...

  5. 用Canvas玩3D：点-线-面

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 玩Canvas玩了有两三个礼拜了,平面的东西玩来玩去也就那样,所以就开始折腾3D了. 因为Canvas画布终究还是平面的,所以要有3D就得 ...

  6. 用Python玩转微信（一）

    欢迎大家访问我的个人网站<刘江的博客和教程>:www.liujiangblog.com 主要分享Python 及Django教程以及相关的博客 交流QQ群:453131687 今天偶然看见 ...

  7. 微信红包店小程序开发过程中遇到的问题 php获取附近周边商家 显示最近商家

    最近公司在做一个项目就是微信红包店.仿照的是微信官方在做的那个红包店的模式.客户抢红包,抢到以后到店消费,消费以后就可以拿到商家的红包了. 项目中的两个难点: 1通过小程序来发红包  这个之前在开发语 ...

  8. PHP实现微信随机红包算法和微信红包的架构设计简介

    微信红包的架构设计简介: 原文:https://www.zybuluo.com/yulin718/note/93148 @来源于QCon某高可用架构群整理,整理朱玉华. 背景:有某个朋友在朋友圈咨询微 ...

  9. 微信支付现金红包接口应用实例代码说明和DEMO详解，适合用来做微信红包营销活动、吸粉利器

      本文详细介绍微信红包开发的接口,商户调用接口时,通过指定发送对象以及发送金额的方式发放红包,领取到红包后,用户的资金直接进入微信零钱.后面带有具体调用php实例   总结一下:需要注意的是PEM秘 ...

随机推荐

  1. 基于linux内核包过滤技术的应用网关

    目录 基于linux内核包过滤技术的应用网关 硬件形态 基本原理 应用场景 主要功能 其他功能 客户定制 基于linux内核包过滤技术的应用网关 硬件形态 基本原理 应用场景 媒体内容过滤和深度识别 ...

  2. Maven学习笔记（二）—— 整合SSH框架

    一.知识点准备 1.1 什么是依赖传递? 我们只添加一个struts2-core的依赖,结果会发现所有关于struts2的依赖都进来了. 因为我们的项目依赖struts2-core-2.3.24.ja ...

  3. C++_类入门4-String类

    很多应用程序都需要处理字符串.C语言在string.h(C++中为cstring)中提供了一系列的字符串函数,很多早期的C++实现为处理字符串提供了自己的类. string类是由头文件string支持 ...

  4. ICEM二维网格

    非结构网格 结构网格 拓扑 拓扑完建立part边界条件,然后创建block 拓扑完后进行边界条件关联 全局网格设置

  5. Wannafly挑战赛26-F. msc的棋盘（模型转化＋dp）及一类特殊的网络流问题

    题目链接 https://www.nowcoder.com/acm/contest/212/F 题解 我们先考虑如果已知了数组 \(\{a_i\}\) 和 \(\{b_i\}\),如何判断其是否合法. ...

  6. 从source安装python3.5和pip

    按顺序来,先装上python3.5,source安装,命令是 ./configure --prefix="你想要的路径" make make install 然后是安装pip,但是 ...

  7. redis cluster 集群部署

    准备工作 1. 安装docker curl -s https://get.docker.com/ | sh 注:一键安装的事最新版docker.已安装docker可跳过此步骤 2. 获取基础镜像 do ...

  8. pandas to_excel、to_csv的float_format参数设置

    df.to_excel(outpath,float_format='%.2f')

  9. 引导篇之HTTP事务

    一个完整的HTTP事务流图: HTTP报文格式: 起始行:在请求报文中用来说明要做些什么,在响应报文中说明出现了什么情况 首部:起始行后面有0个或多个首部字段.每个首部字段都包含一个名字和一个值,为了 ...

  10. TimesTen启动停止命令

    ttDaemonAdmin –start 启动 ttDaemonAdmin –stop 停止 或打开服务cmd-serviers.msc,找到相关服务启动或停止.