canvas模仿微信抢红包功能
2016-06-20 13:42
555 查看
1、原理:先创建一张img图片,用filter滤镜制作毛玻璃效果。
2、利用绝对定位,使canvas刚好盖在img上面。
3、利用canvas原生clip函数剪辑一个圆形。
地址:http://sandbox.runjs.cn/show/c3mlltak
源代码:
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="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>
相关文章推荐
- 几个有意思的小程序
- 花生壳80端口认证:快速搭建微信开发平台教程
- 微信开发资料-小总结
- iOS无法判断手机是否安装微信等(Scheme白名单问题)
- 友盟分享是碰到微信未能安装等错误
- 使用jQuery Rotare实现微信大转盘抽奖功能
- 教你3分钟快速开发微信公众号[订阅号][服务号]
- WeMall微商城营销技巧之六:重在细节的微信营销小技巧
- 微信营销实战技巧分享
- 微信开发:接入微信入口
- 微信6.0 ActionBar样式
- 学习android笔记(9):微信SDK防混淆代码
- Java微信统一下单接口的调用--XStream为什么要替换下划线 美元符号
- 微信6.0主界面
- 读取assets目录下面的图片
- 微信公告号实现原理简单介绍;
- 微信开发之用户组
- 一元云购CMS微信分享打不开解决办法
- Android之粗仿微信6.0——微信分界面
- Android之粗仿微信6.0——微信主界面