canvas模仿微信抢红包功能
1、原理：先创建一张img图片，用filter滤镜制作毛玻璃效果。
2、利用绝对定位，使canvas刚好盖在img上面。
3、利用canvas原生clip函数剪辑一个圆形。
地址：http://sandbox.runjs.cn/show/c3mlltak
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!--Designer:[han.jackson] Developer:[zengxiangliang] date:20160412-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta name="keywords" content="keywords"/>
<meta name="description" content="description"/>
<meta name="robots" content="all"/>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<style>
*{
margin: 0;
padding: 0;
}
html,body,.container,.bgimg{
width:100%;
height:100%;
}
.container{
position: relative;
}
.bgimg{
position: absolute;
top:0;
left:0;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
}
#canvas{
position: absolute;
top:0;
left:0;
}
.button{
position: absolute;
bottom:10%;
border-radius: 5px;
font-size:20px;
padding:5px 10px;
text-decoration: none;
color:#fff;
}
.reset{
left:20%;
background-color: #07C4EC;
}
.show{
right:20%;
background-color: #EC9807;
}
</style>
</head>
<body>
<div class="container">
<img class="bgimg" src="data:images/p43.jpg" alt=""/>
<canvas id="canvas">您的浏览器不支持canvas</canvas>
<a class="button reset" href="javascript:;">reset</a>
<a class="button show" href="javascript:;">show</a>
</div>
<script>
;
(function () {
window.addEventListener('load', winEventLoad, false);
window.addEventListener('resize', canvasApp, false);
function winEventLoad() {
canvasApp();
}
function canvasApp(){
if(!!!document.getElementById('canvas').getContext('2d')){return}
var myCanvas = document.getElementById('canvas');
var ctx = myCanvas.getContext('2d');
var ww = document.documentElement.clientWidth;
var wh = document.documentElement.clientHeight;
var radius = 40; var t;
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; myCanvas.width = ww;
myCanvas.height = wh; var options = {
x:Math.random()*(canvas.width-radius*2)+radius,
y:Math.random()*(canvas.height-radius*2)+radius,
r:radius
}; var img = new Image();
img.src = 'images/p43.jpg';
img.onload = function () {
initCanvas();
};
function setClippingRegion(options){
ctx.beginPath();
ctx.arc(options.x, options.y, options.r, 0, Math.PI * 2, false);
ctx.closePath();
ctx.clip();
}
function draw(options) {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save();
setClippingRegion(options);
ctx.drawImage(img,0,0,canvas.width, canvas.height);
ctx.restore();
}
function initCanvas(){
draw(options);
}
function show(){
var diagonal = Math.max(canvas.width,canvas.height)*2;
(function showloop(){
options.r += 20;
t = requestAnimationFrame(showloop);
if(options.r>diagonal){
cancelAnimationFrame(t);
}
draw(options);
}());
}
function reset(){
cancelAnimationFrame(t);
options = {
x:Math.random()*(canvas.width-radius*2)+radius,
y:Math.random()*(canvas.height-radius*2)+radius,
r:radius
};
options.r = 0;
(function resetloop(){
options.r += 2;
var t = requestAnimationFrame(resetloop);
if(options.r >= radius){
cancelAnimationFrame(t);
}
draw(options);
})();
}
document.querySelector('.show').addEventListener('click',show,false);
document.querySelector('.reset').addEventListener('click',reset,false);
}
}())
</script>
</body>
</html>
canvas模仿微信抢红包功能的更多相关文章
- js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下: <!DOCTYPE html> <html lang="en&qu ...
- 自定义控件(模仿微信ToggleButton控件)
弄过android开发的都知道,系统有一个默认的ToggleButton,但很多人都觉得他很难看,当然也包括我.如果你感觉他不难看,那你就继续使用系统的吧,这篇文章对你来说是多余的了. 今天来写一个模 ...
- Android Studio精彩案例(三)《模仿微信ViewPage+Fragment实现方式二》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 写在前面的话:此专栏是博主在工作之余所写,每一篇文章尽可能写的思路清晰一些,属于博主的"精华"部分,不同于以往专栏 ...
- android黑科技系列——微信抢红包插件原理解析和开发实现
一.前言 自从几年前微信添加抢红包的功能,微信的电商之旅算是正式开始正式火爆起来.但是作为Android开发者来说,我们在抢红包的同时意识到了很多问题,就是手动去抢红包的速度慢了,当然这些有很多原因导 ...
- Android中微信抢红包插件原理解析和开发实现
一.前言 自从去年中微信添加抢红包的功能,微信的电商之旅算是正式开始正式火爆起来.但是作为Android开发者来说,我们在抢红包的同时意识到了很多问题,就是手动去抢红包的速度慢了,当然这些有很多原因导 ...
- C#开发微信门户及应用(40)--使用微信JSAPI实现微信支付功能
在我前面的几篇博客,有介绍了微信支付.微信红包.企业付款等各种和支付相关的操作,不过上面都是基于微信普通API的封装,本篇随笔继续微信支付这一主题,继续介绍基于微信网页JSAPI的方式发起的微信支付功 ...
- ecshop增加pc扫描二维码微信支付功能代码
ecshop开发网站,如果没有手机版,又想通过微信支付,可以加入pc二维码扫描微信支付功能 工具/原料 ecshop商城系统,phpqrcode,WxPayPubHelper 公众号已申请微信支付 方 ...
- AndroidStudio用微信官方方法接入微信分享功能
转载请注明出处:http://www.cnblogs.com/wangoublog/p/5367950.html 现在微信的功能众所周知,用户量.影响力也是惊人,很多应用接入微信的功能已成为一种不可缺 ...
- 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...
随机推荐
- 浅析对象访问属性的"."和"[]"方法区别
在JavaScript中通常使用”."运算符来存取对象的属性的值.或者使用[]作为一个关联数组来存取对象的属性.但是这两种方式有什么区别了? 例如,读取object中的property属性值 ...
- C#进制转换
//十进制转二进制 Console.WriteLine(Convert.ToString(69, 2)); //十进制转八进制 Console.WriteLine(Convert.ToString(6 ...
- IOS集合NSSet与NSMutableSet知识点
NSSet在实际应用中与NSArray区别不大,但是如果你希望查找NSArray中的某一个元素,则需要遍历整个数组,效率低下.而NSSet在查找某一特定的元素的时候则是根据hash算法直接找到此元素的 ...
- 【读书笔记】iOS网络-HTTP-URL结构
http://user:password@hostname:port/absolute-path?query. http: 协议 user:password@ 认证 hostname: 主机名 ...
- Java眼中的XML－－文件读取－－1 应用DOM方式解析XML
初次邂逅XML: 需要解析的XML文件: 这里有两个book子节点. 1.如何进行XML文件解析前的准备工作,另外解析先获取book节点. 这个我后来看懂了: 这个Node的ELEMENT_NODE= ...
- 项目管理工具之Git使用说明
1.下载Git客户端工具 http://msysgit.github.com/ 2.安装msysgit 下一步 同意GNU协议 选择安装位置 选择TrueType Front,下一步 不创建启动文件 ...
- 输入三个整数，xyz，最终以从小到大的方式输出。利用中间变量
<script>function bijiao(){ var x= parseFloat(document.getElementById("X").value); va ...
- html页面识别当前系统和语言
项目中需要一个下载功能,根据系统跳转到不同的页面,如iphone跳转到IOS页面,android跳转到android页面. 下面为页面判断页面: <!DOCTYPE HTML> <h ...
- 斐波那契数列 递归 尾递归 递推 C++实现
==================================声明================================== 本文原创,转载请注明作者和出处,并保证文章的完整性(包括本 ...
- mongodb--与spring整合
一.spring-data-mongodb Spring Data是Spring专门用来数据处理的一个子项目,Spring Data除了spring-data-mongodb之外还包括spring-d ...