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 ...
随机推荐
- React 初学整理
1,通过createElement创建元素 HELLO Word ps:切记组建名称首字母大写 2,虚拟DOM 在虚拟DOM上操作 通过render来渲染真是DOM 3,JSX JSX 是对JS的语法 ...
- Atitit.视频文件加密的方法大的总结 java c# php
Atitit.视频文件加密的方法大的总结 java c# php 1. 加密的算法 aes 3des des xor等.1 2. 性能1 3. 解密1 4. 播放器的事件扩展1 5. 自定义格式 ...
- 转：纠结的Shim
原文地址:http://www.haorooms.com/post/requirejs_sy_lj RequireJs已经流行很久了,它提供了以下功能: 声明不同js文件之间的依赖 可以按需.并行.延 ...
- js事件执行顺序
http://ejohn.org/blog/how-javascript-timers-work/
- 问题解决——MFC SDI程序 CFormView中控件随窗口缩放
从来都是做对话框程序,这次想做个SDI的程序,想着用一下带Robbin界面的office2007风格,就不用使用那些花钱的商业控件/UI库了. 如果你不想看我打的文字,可以直接拷走代码,自己声明上定义 ...
- cocos2d-x之多点触碰初试
bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getIn ...
- jacob 实现Office Word文件格式转换
关于jacob用法,百度一下就会发现几乎都是复制2004年一个代码,那段代码实现的是从一个目录读取所有doc文件,然后把它转html格式. 为了便习学习和使用,我把代码看懂后精简了一下,得出不少新结论 ...
- Linux下配置PHP开发环境
转载于: http://www.uxtribe.com/php/405.html 该站下有系列PHP文章. 在Linux下搭建PHP环境比Windows下要复杂得多.除了安装Apache,PHP等软件 ...
- Linux syslog介绍
一.简介 syslog是Linux系统默认的日志守护进程.默认的主配置文件和辅助配置文件分别是/etc/syslog.conf和/etc/sysconfig/syslog文件.通常,syslog 接受 ...
- java读取word内容
暂时只写读取word内容的方法. 依赖的jar: poi-3.9-20121203.jarpoi-ooxml-3.9-20121203.jarxmlbeans-2.3.0.jar package co ...