使用HTML5实现刮刮卡效果

来源：互联网发布：国外户外品牌知乎编辑：程序博客网时间：2024/05/22 17:35
<span style="font-size:14px;"><!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width; initial-scale=1.0"><title>演示：使用HTML5实现刮刮卡效果</title><link rel="stylesheet" type="text/css" href="../css/main.css" /><style type="text/css">.demo{width:320px; margin:10px auto 20px auto; min-height:300px;}.msg{text-align:center; height:32px; line-height:32px; font-weight:bold; margin-top:50px}</style></head><body><div id="header">   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div></div><div id="main">   <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-270.html">使用HTML5实现刮刮卡效果</a></h2>   <div class="msg">刮开灰色部分看看，<a href="javascript:void(0)" onClick="window.location.reload()">再来一次</a></div>   <div class="demo">   <canvas></canvas>   </div></div><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><div id="footer">    <p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p></div></body></html></span>
0 0