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. Cboard 实现看板里面图表仪表盘之间的联动

    首先要了解Cboard的概念, 1.看板 2.图表 看Cborad的菜单知道了,首先先设计图表,可以展现未柱状图或者其它图片形式或者数据表格式.然后看板可以由多个图表组合而成. 需求如下: 看板包含两 ...

  2. ansible基本模块-command

  3. 【转】Cannot add or update a child row: a foreign key constraint fails 解决办法

    原因:设置的外键和对应的另一个表的主键值不匹配.解决方法:找出不匹配的值修改.或者清空两表数据. 转自https://blog.csdn.net/qq_29405421/article/details ...

  4. R语言常用包汇总

    转载于:https://blog.csdn.net/sinat_26917383/article/details/50651464?locationNum=2&fps=1 一.一些函数包大汇总 ...

  5. myeclipse启动后，卡在loading workbench界面

    今天在修改svn的配置文件的时候,电脑重启了几次,然后myeclipse启动的时候就一直卡在loading workbeach动不了了. 重启了几次也不行,后来查的百度,找到的解决方法如下: 找到my ...

  6. UESTC - 1610 递推方程+矩阵快速幂

    感觉像是HDU Keyboard的加强版,先推出3张牌时的所有组合,然后递推出n张牌 看到n=1e18时吓尿了 最后24那里还是推错了.. (5行1列 dp[1][n],dp[2][n],dp[3][ ...

  7. 关于zipfile解压出现的字符编码问题

    使用zipfile解压文件时,出现了中文乱码问题,具体解决方法有两个,直接上代码吧. def deco_zip(path, file_path): os.mkdir(file_path) # 方式一 ...

  8. 学习python-跨平台获取键盘事件

    class _Getch: """Gets a single character from standard input. Does not echo to the sc ...

  9. Transform 引起的 z-index "失效"

    重新学习CSS后的第三天,学习制作阴影的过程中,发现的问题:设置了box-shadow后展现的阴影: 添加transform:rotate(10deg);后的效果: 查看CodePen例子:阴影效果 ...

  10. ActiveMQ的单节点和集群部署

    平安寿险消息队列用的是ActiveMQ. 单节点部署: 下载解压后,直接cd到bin目录,用activemq start命令就可启动activemq服务端了. ActiveMQ默认采用61616端口提 ...