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. Web下TreeView同一节点连续点击，只执行一次SelectedNodeChanged的解决

    Web下TreeView同一节点连续点击,只执行一次SelectedNodeChanged的解决 http://blog.csdn.net/net_boy/archive/2009/11/05/477 ...

  2. P3332 [ZJOI2013]K大数查询

    传送门 注意操作 $1$ 是在区间的每个位置加入一个数,不是加上一个值 相当于每个位置维护的是一个集合 显然树套树 一开始想的是区间线段树套权值线段树 发现这样询问区间第 $K$ 大时就要先二分答案再 ...

  3. opencv基本操作

    src.convertTo(dst, type, scale, shift) 缩放并转换到另外一种数据类型: dst:目的矩阵 type:需要的输出矩阵类型,或者更明确的,是输出矩阵的深度,如果是负值 ...

  4. 让Nginx支持pathinfo

    # 典型配置 location ~ \.php$ { root html; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_ ...

  5. [转] Mysql命令基础

    [From] http://c.biancheng.net/cpp/u/mysql_ml/ 连接Mysql数据库 mysql命令格式: mysql -h主机地址 -u用户名 -p用户密码 1) 连接到 ...

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

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

  7. cxf 框架 webservice

    cxf 内置了一个web服务器 cxf简单入门实例 package test; import org.apache.cxf.jaxws.JaxWsServerFactoryBean; import c ...

  8. 第十九章：UTC time和local time的互换

    通常我们服务器端的时间使用UTC格式,避免服务器的时区对最终的时间产生影响.而客户端需要根据具体的时区显示local time,本文将介绍如何将服务器的UTC time(基于asp.net web a ...

  9. 在Spark shell中基于HDFS文件系统进行wordcount交互式分析

    Spark是一个分布式内存计算框架,可部署在YARN或者MESOS管理的分布式系统中(Fully Distributed),也可以以Pseudo Distributed方式部署在单个机器上面,还可以以 ...

  10. Developing crm service based on apache cxf

    1 数据库环境搭建 创建数据库boscrm 执行脚本: 脚本内容: /* Navicat MySQL Data Transfer Source Server : root Source Server ...