html5通过canvas实现刮刮卡效果示例分享

2019-10-25 11:20:00 织梦安装使用
  • 文章介绍

修改img.src时涂层也会自动适应新图片的尺寸.

修改layer函数可更改涂层样式

以下是HTML源代码(已增加移动设备支持):


复制代码
代码如下:








需要判断是否刮完时用这段代码替换原代码的eventUp事件处理函数:


复制代码
代码如下:

e.preventDefault();
mousedown = false;
var data=ctx.getImageData(0,0,w,h).data;
for(var i=0,j=0;i if(datai && datai+1 && datai+2 && datai+3){
j++;
}
}
if(j<=w*h*0.1){
alert(ok);
}

这段代码中的0.1是10%的意思,在涂层的面积小于等于10%时,就弹出窗口,表示刮完了,可以根据需求自行调整

上一篇:HTML5 video 视频标签使用介绍..

下一篇:html5适合移动应用开发的12大特性..

专业的织梦模板定制下载站,在线购买后即可下载!

商业源码

跟版网模板,累计帮助5000+客户企业成功建站,为草根创业提供助力!

立刻开启你的建站之旅

QQ在线客服

服务热线

织梦建站咨询