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 ...
随机推荐
- Sharepoint 2013 关于"SPChange"简介
在SharePoint中,我们经常会需要获取那些改变的项目,其实api为我们提供了SPChange对象,下面,我们通过列表简单介绍下这一对象. 1.创建一个测试列表,名字叫做“SPChangeItem ...
- [Microsoft Dynamics CRM 2016]Invalid Action – The selected action was not valid 错误的诱因及解决方法
详细问题描述: 由于解决windows server 评估版过期\SQL server 评估版过期的问题后而导致的Invalid Action – The selected action was no ...
- java中判断字符串是否为数字的方法
一: //1.用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = 0; i < str.length(); ...
- IOS 杂笔－18 (let 与 var)
var 是 variable的缩写形式,是变量的意思 ,是可改变的,并不是数据类型. let 是常量的意思,不可改变的.
- IOS CALayer（二）
UIview内部有个默认的CALayer对象层,虽然我门不可以重新创建它,但是我门可以再其上面添加子层. 我们知道,UIView有 addSubview:方法,同样,CALayer也有addSubla ...
- Android性能优化（一）
Android性能优化典范 1.大多数用户感知到的卡顿等性能问题的最主要根源都是因为渲染性能. 从设计师的角度,他们希望App能够有更多的动画,图片等时尚元素来实现流畅的用户体验. 但是Android ...
- iOS证书失效
iOS证书突然失效 今早上班打包直接报错,错误如图 根据错误信息到“钥匙串”里面看了一下证书,证书都莫名其妙的失效了,昨天还是好好的. 重新去钥匙串从证颁发中心获取证书,然后登陆开发者账号重新申请证书 ...
- javascript 定时器
setTimeout()--用于指定在一段特定的时间后执行某段程序. 格式: [定时器对象名=]setTimeout("<表达式>",毫秒数); 功 ...
- js 毫秒 转 时间 日期 yyyy-mm-dd hh-mm-ss
//格式化时间 var format = function(time, format){ var t = new Date(time); var tf = function(i){return (i ...
- tomcat部署
因为之前一直用的JBoss服务器,今天测试了一下想换成tomcat,然后就考了一个现成的tomcat,然后将jboss下的项目复制了一个到tomcat下,然后改了一下文件名,结果启动时报错 java. ...