欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

html5通过canvas实现刮刮卡效果示例分享_html5教程技巧

程序员文章站 2022-04-01 18:29:11
...
修改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(data[i] && data[i+1] && data[i+2] && data[i+3]){
j++;
}
}
if(j alert('ok');
}

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