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. [WebShow系列] 现场控制台操作方法

    正在制作......,敬请期待. 现场控制台操作方法 现场控制台是现场管理员的管理后台.现场管理员首先登录指定的网址.使用现场管理员指定的登录名及密码就可以登录到后台.在后台点击[WebShow现场控 ...

  2. DQL、DML、DDL、DCL的区别

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

  3. ubuntu18.04 安装mongodb 数据库

    工具: 系统:ubuntu18.04  64位 数据库:mongodb GUI:Robo 3T           描述:在win 下面使用Robo 3T  连接Mongodb 数据库 一. 安装mo ...

  4. 校园网络安全CTF 第一题 和 你真了解我吗？

    第一题: 需要先找到相应头(REsponse header中的tips) <?php$flag = "***";if (isset($_GET['repo']))//检测变量 ...

  5. mysql 外键问题

    清空.删除具有外键约束的表时报ERROR 1701(42000)的解决 解决方法: 解除外键约束mysql> set foreign_key_checks=0; 删除表后添加外键约束 mysql ...

  6. pscp 命令---windows和linux之间互相拷贝文件的工具

    pscp -r d:\cc root@10.0.0.8:/root/test copy d:\cc content recursively into the /root/test, contains ...

  7. AngularJs--Dependency Injection 规则

    参考:https://docs.angularjs.org/guide/di AngularJs的依赖注入简称DI,在AngularJs项目中可以无处不在,到底应该注入些什么东东呢?一直是迷迷糊糊的, ...

  8. POJ_1284 Primitive Roots 【原根性质+欧拉函数运用】

    一.题目 We say that integer x, 0 < x < p, is a primitive root modulo odd prime p if and only if t ...

  9. HDU6333 莫队+组合数

    题目大意: 给定n m 在n个数中最多选择m个的所有方案 #include <bits/stdc++.h> using namespace std; #define INF 0x3f3f3 ...

  10. VBS常用脚本及其解说一览

    取得本机IP strComputer = "." Set objWMIService = GetObject("winmgmts:\\" & strCo ...