您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > HTML5 > HTML5效果 > 正文

使用HTML5实现刮刮卡效果

2015-09-27 02:09:20 作者:天外飞仙 人气:156 Views

使用HTML5实现刮刮卡效果
20150922231834
引入js代码

<script type="text/javascript">var bodyStyle = document.body.style;bodyStyle.mozUserSelect = 'none';bodyStyle.webkitUserSelect = 'none';var img = new Image();var canvas = document.querySelector('canvas');canvas.style.backgroundColor='transparent';canvas.style.position = 'absolute';var imgs = ['p_0.jpg','p_1.jpg'];var num = Math.floor(Math.random()*2);img.src = imgs[num];img.addEventListener('load', function(e) { var ctx; var w = img.width, h = img.height; var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop; var mousedown = false; function layer(ctx) { ctx.fillStyle = 'gray'; ctx.fillRect(0, 0, w, h); } function eventDown(e){ e.preventDefault(); mousedown=true; } function eventUp(e){ e.preventDefault(); mousedown=false; } function eventMove(e){ e.preventDefault(); if(mousedown) { if(e.changedTouches){ e=e.changedTouches[e.changedTouches.length-1]; } var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; with(ctx) { beginPath() arc(x, y, 10, 0, Math.PI * 2); fill(); } } } canvas.width=w; canvas.height=h; canvas.style.backgroundImage='url('+img.src+')'; ctx=canvas.getContext('2d'); ctx.fillStyle='transparent'; ctx.fillRect(0, 0, w, h); layer(ctx); ctx.globalCompositeOperation = 'destination-out'; canvas.addEventListener('touchstart', eventDown); canvas.addEventListener('touchend', eventUp); canvas.addEventListener('touchmove', eventMove); canvas.addEventListener('mousedown', eventDown); canvas.addEventListener('mouseup', eventUp); canvas.addEventListener('mousemove', eventMove);});</script>

下载地址
预览地址

链接:http://www.jqueryba.com/5758.html(转载时请注明本文出处及文章链接)
分类:HTML5效果

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!