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. DQL、DML、DDL、DCL的区别

    1. 历史发展 SQL(Structure Query Language)语言是数据库的核心语言. SQL的发展是从1974年开始的,其发展过程如下:1974年-----由Boyce和Chamberl ...

  2. [转] NOI, NOIP, IOI, ACM

    [From] http://blog.csdn.net/chenbean/article/details/38928243 NOI是教育部和中国科协委托中国计算机学会举办了全国青少年计算机程序设计竞赛 ...

  3. iptables 深入分析

    四表五链四表:filter , nat, manager, raw五链: 五个HOOK点的链接,pre_rout, foward, post_rout, in ,out 问题:内核如何匹配,内核使能 ...

  4. linux下安装使用虚拟环境

    一.导语 在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题: 亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难. 此时,我们需要对于不同 ...

  5. 【研究】CVE-2017-11882-Office远程代码执行漏洞复现

    实验环境:win10+kali 工具:koadic,Command43b_CVE-2017-11882.py KALI: root@kali:/opt/koadic-master# ./koadic ...

  6. 剑指offer5.1——O（n）的复杂度合并两个有序数组

    #include"iostream" #include"stdio.h" using namespace std; int* ArrayMerge(int *a ...

  7. html简单布局

    转载:https://jingyan.baidu.com/article/ca41422f7e52831eae99eda2.html

  8. AIDL(2)：服务端回调客户端

    1.大致流程 在服务端声明远程服务接口IRemoteService.aidl,并声明回调接口ICallback.aidl 在服务端实现远程服务接口IRemoteService.Stub 使用Remot ...

  9. 解决Resharper在Core项目中无法执行单元测试的问题

    项目升级core了,resharper最近升级到2018.1版本,但是安装后还是无法直接运行单元测试,昨天小姐姐发了解决方法,贼有用.所以记录一下,给自己以后或者其他遇到此问题的小伙伴用.  解决Re ...

  10. Mina入门demo

    初识Mina,简要记录理解内容和实现demo. 这里先简述一下BIO和NIO的区别: 同步阻塞IO(BIO):一个连接一个线程,客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任 ...