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 ...
随机推荐
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- 【github】github 使用教程初级版
github 是一个基于 git 的代码托管平台,付费用户可以建私人仓库,免费用户只能使用公共仓库.对于一般人来说公共仓库就已经足够了,而且也没多少代码来管理.下面简单介绍如何使用 github,供初 ...
- Enforcing the correct protocol for partially SSL secured SharePoint sites
Enforcing the correct protocol for partially SSL secured SharePoint sites http://www.sharepointconfi ...
- Android开发者的Git&Github(一)
安装Git: Linux(以Ubuntu为例): sudo apt-get install git-core Windows: 访问网址http://msysgit.github.io/下载安装包 下 ...
- C语言-06-复杂数据类型
一.数组 1> 数组的定义和初始化 定义 ① 数组定义了同种类型数据的集合 ② 定义数组时,数组必须有固定的长度 初始化 ① 如果在定义数组时,初始化数组,数组元素的个数必须是常量 ② 如果不在 ...
- 安装MySQL，在./configure时出现错误：error: No curses/termcap library found的解决办法
是./configure出了问题,于是回头查看,果然发现问题: 最后几行出了错.完整错误信息如下: checking for tgetent in -lncurses... no checking f ...
- mysql字段不能为空的字段为空时也能插入的方法
接手了一个项目,设计数据库的时候字段全部是不能为空,但是空值又可以插入数据,刚拿过来的时候就提示各种sql语法错误,现记录一下解决办法. 将my.ini中设置: #sql-mode=STRICT_TR ...
- Atitit。 《吠陀》 《梨俱吠陀》overview 经读后感 是印度上古时期一些文献的总称
Atitit. <吠陀> <梨俱吠陀>overview 经读后感 是印度上古时期一些文献的总称 1. 印度古<吠陀>经,是印度上古时期一些文献的总称, 1 1.1 ...
- 关于touch事件对于性能的影响
第一次写博客随笔,废话不多说,直接进入正题. 最近一直专注于移动终端的开发,碰到了一个比较棘手的事情,就是touch事件,大家都知道,touch事件有几种,无非就是touchstart,touchmo ...
- 论近年来IT媒体的怪现象
之前在Svbtle上看过一篇文章干掉这帮搞IT新闻的!,作者因为CNET曲解原意,称Instagram要单方面售卖用户自己照片的乌龙事件,致使内心遭受严重刺激,怒吼出「科技媒体记者都应该被枪毙」的言论 ...