html5通过canvas实现刮刮卡效果示例分享
程序员文章站
2023-11-17 14:48:10
本文主要介绍了html5通过canvas实现刮刮卡效果的示例，大家参考使用吧... 14-01-27...
修改img.src时涂层也会自动适应新图片的尺寸.
修改layer函数可更改涂层样式
以下是html源代码(已增加移动设备支持):
复制代码
代码如下:<!doctype html>
<html>
<body>
<canvas/>
<script>
(function(bodystyle) {
bodystyle.mozuserselect = 'none';
bodystyle.webkituserselect = 'none';
var img = new image();
var canvas = document.queryselector('canvas');
canvas.style.backgroundcolor='transparent';
canvas.style.position = 'absolute';
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, 5, 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);
});
img.src = 'data:image/png;base64,ivborw0kggoaaaansuheugaaakkaaaancayaaab0b2ihaaavnuleqvr4xu1ccxsuvzb+qplaulwpjqthr5bndkekgczkae1w7fmc0dazyzvthnszp9uzbu3wm924nnkg0rihunasldpqszd9dfyqvsagkurlsqislstsa6wyj/pdsv7kq0ql6o+gdefuo4flpp56//vv+9693/3u/wpo5eb8xc1wavvaeafpbbw78auflbaharwif7wf4ic94lcovsa4somyuoateafpbb9f8qxgqrrhwavvgt5bwtnugvj/g0oa2thw0bdkztaarhhgsgdsjinsranwwo1w8p9gfhy+zn6sbs7rb0c75/xw+oykbaywj8jsvhdsjesrlt9cq4xug9fjnq7gwhmipjfelbfrll6wdlq1tfnpb/xthwht7/p2ip/fxr9cfmpahsk0ikwpm10sdtrrl2jx9qns/bo/vn9qgy+add6gg2clmie6lfg82o5f6eaiwmur8ghf1iocao2zd8ruvdw/zgan6rx2x+cy9v6w+1uththaizpblxhx05xupddc+ruok5zzmuyofplacbjyhx1nm1fqt6c2dkkaqw1toggpsymymg7f4ktsgo80iyuhhkyngrelhfxa+2ubnkukhk9vr8bnxy6kn8oak8a68otxsrjqtazxphvo1ohx3tu40e09zoixy1x4cyqtxvjccaufnkjgb/bwozr45az8z6ohvxlvp7fr32fq7uagkuuv12pj5z5k+3xwtxisco14j/5jpa2dhykhxvviswm/grpx8j496bmbvo5lwpcu9+l+ubyq8f0sxj1fibuvwerrq9bxkjx7uak1ovgp7tbes11ynseecuavfjt++yalyrxsi0/qjptd9u5ek2nzlz/8knwdbfasudqn2v5zck0xi3hpf0if1+7/sgordjwito8ds6jnfqbtyndfetmx4myzxvym4v+4qoylxy7fokgtthuwtlnjfen4aj7dogxq78tpmia8lvulz5ruzrnx73ntcm8iwzcjulimez5a2kg3mltajyd31ebygg0ymtncnnkoazlmcevgxofjblvq0oa/n2hciukh5lmeuxwrf7iryqmvzoniseo3dlkb2461vyvjotvu695fuqv453a5nstrqc9+ghdjdc8eiy/tkls9xpunrmwiud7yjjpmw3iqpbcmgxkclz7hs1vaokzl0jupubcn80jcos3tzhkeejkhkaupfcwrc6qn9hol5jmlfg6fke6ojgy3kv2lcibj4fkmszspluhfm6gis9otehbgmjjtzqe1reuk+jgop+f9tlgoa7lrcsoe2dzwc9nwz2bl4mdrtaossyhhvaoocl2syjm4kaigpdexc1nrims1reuqnaam/ybyxhn2hmb35pssjro4l4k/t+lzihx8lz1opgjh5txiiwfmajxvr+2lxtfforkvqxqiwyomnoqz/n5x0mggftnlg2mveplzjvq4uwnuzuzfl8hlntkqlnhfoctchxvn2j5xh12lrshu6kszqiwmnewy4fnd7lizscvijhwomgwaweqfav5y3yhtj3zyxdakes5dbawgnsevw+24bbg1wpfe+nqiblix6omazrybxyenpv0a1ubkibc2zuvgab6cbczkj++qdvwixgt8zi4h/ztqggbg+jdlcyf9pkack460wsq1prmyk1ituha0ezpdif0cqrxwosw5z3x473qttljrqnhodj8j2zqi8wlw3dqmcvottqgprduxb5awu1yd+z+qw1faqs0w3dpnhuoih94pbkonpd4nkp5sxnrdm/6vrnkiqw3pxo3cphp/vy4u+sy7obwp5dqr9cyb9y5kx78nnauihtrogaryosrbnahtxzzdzfhjibjpjhn+e7ux16dbgvembvlxekczip/zxwvipebwptixbjytm9zmodqkaxlpfuhunz7n9amolhsgt+p0w7fkhguz6dk0gawvkc4zm0sv0oz3cyuw9nqb1kln9jcpzxfjdjdfisdhx8rxych10aipgxxyo8ojka7e0uhbl3j7isyorod2an8xzvm0u/lxiodecc9gkcj3yepbwuzyxcjyqcrcpyezpybvfsvbvlt84/0tvvq5fd182mjeagsncsiteisfnw9qx1snvzsy8p3phvyskqtqrpkqm7fhdym2kctdmgtfc/pdmmu9oceqmrkjd1pphmzwjkmeqkjwhtftyhedtn/vpnhrynqof56f4sbaegjtraopbmsxqka8tksc23wx8rm8ypxyd1zpsgp4armyotmf1xj0yamqdwbttq8dz8xoxhrsgvgyiof00vq37h5ixyevk7hqsatucdlonwnjphvxub920fuv0ytv+bqet32pwtiarvpcehicpcrr63/snitjhfz6hoyjjt6s2kszmxi2fug2bsy8josb2wvugb1a2sdiu4c68dpbbqz7pc5exkwd7msgk5ybscwdtab7z9zshqxfoelprlpbekwirqgf/fkk/tgmx2vde7ncgu1xqybrjctz7r7jdaofnmgv3czdy8gcdbochk6crgzbflkabuxzhoqkvdrfhqm8l/cvi5v+plutavvcchedxaxjkdrt29qru9qmmygfgzbfdfcgpqndkucaoc6jay2tecq3udfpurbtin4+y4pfgzyg/yqsa8xre0vwarl6soz40wwv7hmzfdgi2givhkwys1tzha8kxxovfm2owggpk478yu8z3q4ko6wm5endiuhjccupaanh7ag4m+awghfhzgruhgqbk4ctgkgtfiheevqgdinuyfti70hftnxsik0vanxcjbulpbiw0vrcfjuj5xuhy/d44rye6zmgbpzxhc9uh2anwgh7rkcaae7edyc4cmnqg4at56gbegukoyu1edmvsys70rvy0hx4gorcpcncxqzkgq1457nyvk1yqyaazxa6sycwfw724dfylp2succi3iflhzuxzhwscxoiwmjyy1v+bmqqqy5s+xjmulb5nhmdiokukshdhmykcmsvhjjm3nwll6hohpdkgvykcjknu0qxwdwdubn3zpxilqod6siramdkrzxyq6wlelcda114pdpbsjyqfatifpbs2z90wi96zsjj2h5oqjgfvswj59wmopu/rma64y0hetdjm4t1c10ys0rsf0injxtihwsvqsbo4gumsgigqb2bxpprupzghtshhpz8mhzs2l2cpync1exkwrqrxjjkiuybvhgqbtbhzbtxggt3j7igsjynqfhdpr+ylicrzsynj0423mgfieeqmcgffda2yht+dt6qujbinuhxbv5cn8ccm/wteg1vktawkz8nmvdipdeuh2gl8lbjld8njdhewip9a+mi8ez+gcqwj7y0tyfli3fbkpapbgffnetcvercqmlulnvcnupjerzzu7jigmhefxkkpx6rfilbvwcou+2urn4m7mwjjvk3jxmxmwjes2mtjfxwgrk8xktygpe+a5yx/0pgcr2rivl2pvnhg1lhhpfj3f3zuvaduput1hhdokkedocvt89xkt/shssplf/nkw/aczsqkavekqn56xnyb9howuv1wm6ky6hyrnmneldymnsvfuazuv9a2kvm79oxkycackq6xkyw4uzfvzdyg3wxfpfs5qurrhry3tjfc46xt6cgrguneypihg7llhy/bkg4fkex32o4pvxjtrujhb8pfmfmovdy3grms+kpkojci40elvx7avdmkhkrttsplbjie3s3vtxiu+8nsmnluqe7d8sf1mpchf0bgxlfkhtilf4gvycvo2oxopwctkshgs9tpw163blmtitenovgdcym6pcd/z6lw+vfqjm2addd7sej5m47ezddqtpkrdjenuykb+3nh4t5+p+cxylntylgyak9gvszk55565eylfddfuii/vcql/5xsdvevqhxbx294xsplbpjzbeyykbxmhpnplwhn062hilizshz5crzcba9walk96fqm7gd8tn7rc1gh0bsqsmspycvkmpjxr2tevuuzmgzasf6zgsmjqdv9jw5ppaczhy4vjnutfeyq4ws8tdfckqx6nioij/tmg9wscspaoefdy3404eabk8np+z21i3t0invgaie6axpqto/nt5whwyfprgzhfg304lryaqcrkj3t1tisawg1cngmmoeavvkj/ac7g3syfzsuymoibkakd17ttdgkfseeqipadczy78ljzz1qdnevhiym92bv7k3l5do9tx65umj6atimy5unuhn/exyuq3grhopevh7jvmgx4rmsuvmzqnk8sq+auxumynt9ftkars/lz3tonvym5x/l+e+ekhlc9cyc5+ocb75nnhqnxh6wntg9ijuvj5rohtl6xxsu9uf+zls1vacsiomfqhchsmlcb/pjn/jwrri6sp3frljihdav2rokawjhb++uik2xpcejuif2l6jbowgnk+qzp3sxrmmz/y+utaovdvh/a4yvksqyrn/3cz+38ipv7j/gneabw8ywvu16ncwnjeqyssn6tvw19xsrdkzgvfntffijb2heppoipwzllg5qxqvqvort3j8hhxxmqkbw9pwqvdzgnrdboatieznznjst4ctrgr3osgtnufchelpu4eaqki2cblvhbbzdeght5pmwdri+ukk8txufaugndyjr5ufllz/fa8wmprqsoaa7rap3npbq/bpiarkxl/m9odo4agnn+rgihfbeaywk/fu4rrisr0glfuz3g8rx9zzcpel2rwkxww7eov7otgepbslg0zuive/kmmtr5umpjer89oalmquwedybbfvdgf+37gnfcmerwrg29llekss1jnexwdeyocsvh4npkeqg7cc3iyfluaypnib306ym1sba2w7s6zgbgeyxamyb4j0fuf6tv+je7pqn8z14lyhnojmjupm+zhsynl8rnbsijedlpqer2czyytxiurjpr4bhpzmgj/r/n0hp9tiyuiryxig7yyqtxn+9tecejxhrtreilky8lozbixk61ietekxlhzk2rbmv+one80hupxekerijplxolubyel0i/lhoyiktq8xcfqlkluze/hl+v7cqp74ya/eqst0pzy2y+legpkqhshity3jonqskfj6dw954gsdhyfj95dh5rbqvp3ypbas719rcb2l8afhuo0i6dpef8hm7dw85hbuawlkf+an4hzmirfqzsfk6/hozloukts6git9syj0bkusqrpnlvuxmytn04qxgalsgatfss/s3fajypniw8ntnrhcsvgy9kpkrhuz61cguealy47xfrowmsjzjjaunozbem5ovvmbxt9xijdupzajwh3m3g8azakebekov2dyxsxnyg0x1bmtsjbz/rw83tndvjead2f5i3aebksol0y/5k7zwf3bwox+hhlltmmu4nnnsund2af6syzbtauejdrljkgssldrwywofac2mnguynvbgoonughyseref9xhntjeyanqm+i2hpqfssivqz+3xycvgm0ghelw1zwkbauaqipofeluamamteo7cxs04xbsq61go/urls1qyrpujapzkclx+vgvl2habko4qg3cmiznn5awbmx8hrtzvsdtphy2o4z3jmjomorzsevhasrs0pjl5ees1esr3cs9dpytwbi99shvlpi6ybkoey6gwk75gkk8hwlifczbj3bdxduyyksej2z/rp8jdtb10lldvzlodvrq582vacqro8vxniquyswi5tmgazqks+oo5ocfbsppdzghuj1ivkh/fyh0kxgoqg8osmvrbzm5phek4mgc3yyxiisri5rbww3qp5d2bb/in9cl3seky51dlefihm24deskb5otvhlcsxxclib9bb3yrco6glm+qbko1pkv9fnt9bsbd5zirapfsr/qdlze7mri1rib8drfdn8hgtafyjoc3jjt+fmpzbdjaco+06lqckhjsxldky0hlz0qx2mucxruxarbjdcehj0ulgv/xzakj89h1ht+zwwyivrgjobbggsmowldt7hgnwdsnij8f7i78oqdknrhm66vyeoy34fas6e6lxduh8rfwt2bgipznu5hwglqeg+msqesnv42mhhyyxmyyvmmykixgky010ck8rj9c8xhock0jzhjzvzrpesrutbhmtlwls/qv+mlohyo6wy0tekz6flogcpjdew7huhsp2xusuaqc4smll/mw7pp67bpr4pj37mwcsff4rlrxehaxaytxgjhple8qdxfmnyekz8bxskhnwb0krczgdbz8ux5exfpvkuvzmcz7wjw2v95rindrwz9ymhs5z1yl5bjpekks+73j9rio2v0perygq2lixzomge+g4vnjbuqe7gagxw3ngcub5uvcarbjie52kpx4mph0qrhfj/nqril39fuwmzywpuhwjgepe19evdpi3ib5ivi9lk8ngv05fol0nhfkk5okg3ihovevmzmoaduj4/jow+zoffjj8fyexbij2ckvyyx1jxncxonkczjejc6ujpfldvkhhlpqksecwuhixqw8yzvwuupizw8qmw7w/uu40t/0qo3rwvvu9bdq1wp0elweam4jzztw/oihtir1j6kerpyk4aqjfmo8loezfusjhzgz/mv5scz8qgkrm4mkjxm9nrshuttspzjqwvq8yqueklklkal0vaadsvkcrmwbufafvxcor2enot6yyvla7vm4/b7ylwc/edtm/+vur0ubw30uf5yvjgcpewybna9rzrlytt12jp7dkhzypdwjwxwvl59lmfxsym2n0+eutzswvmeuvl5eiohvehsj+vswvpcn1gphbxvak9ry/0kwzl84es0pwvppzunr3plxv2n2pxdvrnwuypssxpsbv0djunhznpg/jdd6lfs/bpdfpbd28qtiy5bliocjm8b9teavt49gyrir+z58q+dynti7utxkooyf/wipryoawjbllkrq2yibqzml1frjnnhze00kibsnh3w3v+qz944spvykx6nlgvk82xm9dvkscvssvtmyml033wx8xa+pxwjcvz1kzhidzk/fpeec0jb36vsox1b7vqjftgaozs3fk15a5dypoaeeemg1wol+dw6lcc/pwxx5+v4vkavwv+pqcgztjmwu/y/kv1qiqof/8qgwjphqrrlqvhpdvtaeibj6ewvkt5vublkvefublumxebto3ecphotfb/ub2aboej/zqap31ivbf4fy4yumtp6excaaaaasuvork5cyii=';
})(document.body.style);
</script>
</body>
</html>
需要判断是否刮完时用这段代码替换原代码的eventup事件处理函数:
复制代码
代码如下:e.preventdefault();
mousedown = false;
var data=ctx.getimagedata(0,0,w,h).data;
for(var i=0,j=0;i<data.length;i+=4){
if(data[i] && data[i+1] && data[i+2] && data[i+3]){
j++;
}
}
if(j<=w*h*0.1){
alert('ok');
}
这段代码中的0.1是10%的意思,在涂层的面积小于等于10%时,就弹出窗口,表示刮完了,可以根据需求自行调整
上一篇： HTML5样式控制示例代码