canvas玩转微信红包
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玩转微信红包的更多相关文章
- 基于微信红包插件的原理实现android任何APP自动发送评论(已开源)
背景 地址:https://github.com/huijimuhe/postman 核心就是android的AccessibilityService,回复功能api需要23以上版本才行. 其实很像在 ...
- 微信红包中使用的技术:AA收款+随机算法
除夕夜你领到红包了吗?有的说“我领了好几K!”“我领了几W!” 土豪何其多,苦逼也不少!有的说“我出来工作了,没压岁钱了,还要发红包”.那您有去抢微信红包吗?微信群中抢“新年红包”春节爆红.618微信 ...
- (实用篇)php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
微信入口绑定,微信事件处理,微信API全部操作包含在这些文件中.内容有:微信摇一摇接口/微信多客服接口/微信支付接口/微信红包接口/微信卡券接口/微信小店接口/JSAPI <?php class ...
- 对接微信红包时:CA证书出错,请登录微信支付商户平台下载证书
今天在对接微信支付的微信红包发放时,出现““CA证书出错,请登录微信支付商户平台下载证书”的错误,特此记录一下: 如果你也在对接微信红包,并且你也在这个页面上下载了demo,再就是你也参照了里面的文档 ...
- 用Canvas玩3D:点-线-面
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 玩Canvas玩了有两三个礼拜了,平面的东西玩来玩去也就那样,所以就开始折腾3D了. 因为Canvas画布终究还是平面的,所以要有3D就得 ...
- 用Python玩转微信(一)
欢迎大家访问我的个人网站<刘江的博客和教程>:www.liujiangblog.com 主要分享Python 及Django教程以及相关的博客 交流QQ群:453131687 今天偶然看见 ...
- 微信红包店小程序开发过程中遇到的问题 php获取附近周边商家 显示最近商家
最近公司在做一个项目就是微信红包店.仿照的是微信官方在做的那个红包店的模式.客户抢红包,抢到以后到店消费,消费以后就可以拿到商家的红包了. 项目中的两个难点: 1通过小程序来发红包 这个之前在开发语 ...
- PHP实现微信随机红包算法和微信红包的架构设计简介
微信红包的架构设计简介: 原文:https://www.zybuluo.com/yulin718/note/93148 @来源于QCon某高可用架构群整理,整理朱玉华. 背景:有某个朋友在朋友圈咨询微 ...
- 微信支付现金红包接口应用实例代码说明和DEMO详解,适合用来做微信红包营销活动、吸粉利器
本文详细介绍微信红包开发的接口,商户调用接口时,通过指定发送对象以及发送金额的方式发放红包,领取到红包后,用户的资金直接进入微信零钱.后面带有具体调用php实例 总结一下:需要注意的是PEM秘 ...
随机推荐
- 基于linux内核包过滤技术的应用网关
目录 基于linux内核包过滤技术的应用网关 硬件形态 基本原理 应用场景 主要功能 其他功能 客户定制 基于linux内核包过滤技术的应用网关 硬件形态 基本原理 应用场景 媒体内容过滤和深度识别 ...
- Maven学习笔记(二)—— 整合SSH框架
一.知识点准备 1.1 什么是依赖传递? 我们只添加一个struts2-core的依赖,结果会发现所有关于struts2的依赖都进来了. 因为我们的项目依赖struts2-core-2.3.24.ja ...
- C++_类入门4-String类
很多应用程序都需要处理字符串.C语言在string.h(C++中为cstring)中提供了一系列的字符串函数,很多早期的C++实现为处理字符串提供了自己的类. string类是由头文件string支持 ...
- ICEM二维网格
非结构网格 结构网格 拓扑 拓扑完建立part边界条件,然后创建block 拓扑完后进行边界条件关联 全局网格设置
- Wannafly挑战赛26-F. msc的棋盘(模型转化+dp)及一类特殊的网络流问题
题目链接 https://www.nowcoder.com/acm/contest/212/F 题解 我们先考虑如果已知了数组 \(\{a_i\}\) 和 \(\{b_i\}\),如何判断其是否合法. ...
- 从source安装python3.5和pip
按顺序来,先装上python3.5,source安装,命令是 ./configure --prefix="你想要的路径" make make install 然后是安装pip,但是 ...
- redis cluster 集群部署
准备工作 1. 安装docker curl -s https://get.docker.com/ | sh 注:一键安装的事最新版docker.已安装docker可跳过此步骤 2. 获取基础镜像 do ...
- pandas to_excel、to_csv的float_format参数设置
df.to_excel(outpath,float_format='%.2f')
- 引导篇之HTTP事务
一个完整的HTTP事务流图: HTTP报文格式: 起始行:在请求报文中用来说明要做些什么,在响应报文中说明出现了什么情况 首部:起始行后面有0个或多个首部字段.每个首部字段都包含一个名字和一个值,为了 ...
- TimesTen启动停止命令
ttDaemonAdmin –start 启动 ttDaemonAdmin –stop 停止 或打开服务cmd-serviers.msc,找到相关服务启动或停止.