<!DOCTYPE html> <html> <head lang="en"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" /> <meta charset="UTF-8"> <script src="js/jquery-1.9.1.js"></script> <title></title> <style> body{ background-color: #ffdcaf; } .gua_bg { width: 415px; height: 200px; padding-top: 12px; padding-left: 12px; background: url(img/gua_image.png) no-repeat; background-size: 100% 100%; color: red; } .gua_bg p { position: absolute; width: 384px; line-height: 173px; text-align: center; font-size: 30px; } .gua_bg canvas { cursor: hand; position: absolute; } </style> </head> <body> <div class="gua_bg"> <p></p> <canvas/> </div> <div class="gua_cont"> <button class="continue" >继续刮奖</button> </div> <div class="gua_residue">你还有<b>0</b>次刮奖机会</div> <script> (function(bodyStyle) { localStorage.num=localStorage.num || 3; $(".gua_residue b").text(localStorage.num); $(".continue").click(function(){ localStorage.num=localStorage.num-1; history.go(0); }); if(localStorage.num>0){ bodyStyle.mozUserSelect = 'none'; bodyStyle.webkitUserSelect = 'none'; var img = new Image(); var canvas = document.querySelector('canvas'); canvas.style.backgroundColor='transparent'; img.addEventListener('load', function(e) { var ctx; var w = 403, h = 190; var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop; var mousedown = false; function layer(ctx) { ctx.fillStyle = 'gray'; //画布填充灰色 ctx.fillRect(0, 0, w, h); //绘制“被填充”的矩形 ，坐标（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 ) - offsetX || 0, //clientX返回当事件被触发时鼠标指针向对于浏览器页面的水平坐标。 y = (e.clientY) - [$(canvas).offset().top-$(document).scrollTop()]; //document.body.scrollLeft获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 //offsetX发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标 with(ctx) { beginPath(); //起始一条路径，或重置当前路径 arc(x, y, 11, 0, Math.PI * 2); // arc()用于创建圆或部分圆; x，y:圆心距边框的距离 11:半径 Math.PI * 2：圆 fillStyle="red"; fill(); //填充当前绘图（路径） var prize=""; switch (parseInt(localStorage.num)){ case 3 : prize="京东卡"; break; case 2 : prize="优惠券"; break; case 1 : prize="现金红包"; break; default : break; } $(".gua_bg p").text(prize); } } } canvas.width=w; canvas.height=h; // canvas.style.backgroundImage='url('+img.src+')'; ctx=canvas.getContext('2d'); //返回一个用于在画布上绘图的2d环境 //创建透明目标图（您已经放置在画布上的绘图） ctx.fillStyle='transparent'; ctx.fillRect(0, 0, w, h); //绘制“被填充”的矩形 ，坐标（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); }); img.src = 'img/gua_img.png'; } })(document.body.style); </script> </body> </html>