jquery刮刮卡
var gua = 1,re = 2; // 可设置刮奖次数var imgSrc = 'img/aa.png';function showdiv() { document.getElementById("bg1").style.display ="block"; document.getElementById("show").style.display ="block";}function hidediv() { document.getElementById("bg1").style.display ='none'; document.getElementById("show").style.display ='none';}$(function(){var width = $("#show_img").width();var height = $("#show_img").height();var winheight=$(window).height();var winwidth=$(window).width();$("#show").css({"width":300 "px","height":160 "px","overflow":"hidden"});$("#show_btn").css({"width":176*0.5 "px","height":76*0.5 "px"});$("#gua_div").html("x" gua);$("#re_div").html("x" re);if(gua == 0){showdiv();}})$("img").load(function(){var body_width = $(window).width();var body_height = $(window).height();$("#gua1_img").width(300).height(160);var height = 141;var width = 285;var bg2_width = $("#bg2_img").width();var bg2_height = $("#bg2_img").height();$("#gua1").css({"margin-top":"20px"});$("#notify").css({"margin-top":"200px"});$("#nImg").width(300).height(101);$("#di").css({"margin-top":"50px"});$("#di_img").width(414*0.7).height(24*0.7);$("#gua").width(width/10).height(width/10);$("#gua_div").css({"line-height":width/10 "px","width":width/10 "px","height":width/10 "px","margin-top":"-" ($("#gua").height()) "px","margin-left":$("#gua").height() 5 "px","font-size": $("#gua").height()/1.6 "px"});$("#re").width(width/10).height(width/10);$("#re_div").css({ "line-height":width/10 "px","width":width/10 "px","height":width/10 "px","margin-top":"-" ($("#gua").height()) "px","margin-left":$("#gua").height() 5 "px","font-size": $("#gua").height()/1.6 "px"});var gua1_img_width = $("#gua1_img").width();$("#front").css({"margin-top":9.3 "px","margin-left":7.5 "px"});if(gua > 0){bodys(height,width);}});function bodys(height,width){var img = new Image(); var canvas = document.querySelector('canvas'); canvas.style.position = 'absolute'; img.addEventListener('load',function(e){ var ctx;var w = width, h = 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, 15, 0, Math.PI * 2); fill(); } } } canvas.width=w; canvas.height=h; canvas.style.backgroundImage='url(' img.src ')'; ctx=canvas.getContext('2d'); ctx.fillStyle='b9b9b9'; 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); });img.src = imgSrc;(document.body.style);}
评论