html5通过canvas实现刮刮卡效果示例分享_html5教程技巧
程序员文章站
2022-04-01 18:29:11
...
修改img.src时涂层也会自动适应新图片的尺寸.
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');
}
修改layer函数可更改涂层样式
以下是HTML源代码(已增加移动设备支持):
复制代码
代码如下:需要判断是否刮完时用这段代码替换原代码的eventUp事件处理函数:
复制代码
代码如下:e.preventDefault();
mousedown = false;
var data=ctx.getImageData(0,0,w,h).data;
for(var i=0,j=0;i
j++;
}
}
if(j alert('ok');
}
这段代码中的0.1是10%的意思,在涂层的面积小于等于10%时,就弹出窗口,表示刮完了,可以根据需求自行调整
上一篇: MAMP安装php redis
下一篇: 分享一篇基于.NET的微信SDK
推荐阅读
-
html5通过canvas实现刮刮卡效果示例分享
-
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果_html5教程技巧
-
HTML5 canvas实现移动端上传头像拖拽裁剪效果_html5教程技巧
-
网页中的电话号码如何实现一键直呼效果_附示例_html5教程技巧
-
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法_html5教程技巧
-
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)_html5教程技巧
-
通过Canvas及File API缩放并上传图片完整示例_html5教程技巧
-
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)_html5教程技巧
-
html5使用canvas实现跟随光标跳动的火焰效果_html5教程技巧
-
HTML5 canvas标签实现刮刮卡效果_html5教程技巧