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 ...
随机推荐
- Threading.Tasks 简单的使用
using Lemon.Common; using System; using System.Collections.Generic; using System.Linq; using System. ...
- SharePoint 2013 Installation and Configuration Issues
# Issue 1: During Installing SharePoint 2013 Prerequisites there was an error in installing Applicat ...
- eclipse 设置豆沙绿保护色，保护眼睛
1.菜单栏 windows–>preferences–>general–>editors–>text editors中 在Appearance color options下修改 ...
- Android logcat
logcat是Android中一个命令行工具,可以用于得到程序的log信息. 基本命令 logcat使用方法如下所示: [adb] logcat [<option>] ... [<f ...
- JSP Model模式
用JSP开发的Web应用模型可以分为Model1和Model2 对于小型的Web应用,通常可以使用模型1来完成. 模型1可以分为两种方式: 一种是完全使用JSP页面来开发Web应用: 另一种是使用JS ...
- C语言中do...while(0)用法小结
在linux内核代码中,经常看到do...while(0)的宏,do...while(0)有很多作用,下面举出几个: 本文地址:http://www.cnblogs.com/archimedes/p/ ...
- Android源码分析之Looper
先来说说summary,Looper就是用来在某个线程中跑一个message loop.一个线程默认是没有message loop与之相关联的, 为了创建一个你必须在这个线程中调用Looper.pre ...
- 斯坦福iOS7公开课7-9笔记及演示Demo
这一部分主要介绍了iOS的绘图.手势.协议.block.力学特效动画(包括重力.碰撞.吸附等)以及自动布局的内容. 1.绘图.手势 (1)调用一个自定义的UIView时,可以使用awakeFromNi ...
- MongoDB学习笔记——数据库安装及配置
MongoDB数据库安装 MongoDB官方下载地址:https://www.mongodb.com/download-center 首先需要根据Windows版本选择正确的MongoDB版本进行安装 ...
- Linux下使用iostat 监视I/O状态
我们可以使用 sar(1), pidstat(1), mpstat(1), vmstat(8) 来监控 一.安装 yum install sysstat 二.参数解释 FILES /proc/stat ...