您现在的位置是：网站首页> 编程资料编程资料

html5通过canvas实现刮刮卡效果示例分享HTML5 Canvas实现刮刮卡效果HTML5 canvas标签实现刮刮卡效果 Html5实现移动端、PC端 刮刮卡效果

2021-09-01 999人已围观

简介 本文主要介绍了html5通过canvas实现刮刮卡效果的示例，大家参考使用吧

修改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<=w*h*0.1){
alert('ok');
}

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

上一篇：html5画布旋转效果示例HTML5 画布canvas使用方法使用分层画布来优化HTML5渲染的教程用html5的canvas画布绘制贝塞尔曲线完整代码html5的画布canvas——画出简单的矩形、三角形实例代码html5的画布canvas——画出弧线、旋转的图形实例代码+效果图HTML5边玩边学（1）画布实现方法 Html5画布_动力节点Java学院整理

下一篇：html5实现多文件的上传示例代码HTML5 文件上传下载的实例代码HTML5拖拉上传文件的简单实例HTML5应用之文件上传HTML5+WebSocket实现多文件同时上传的实例移动端HTML5实现文件上传功能【附代码】移动端HTML5实现文件上传HTML5拖拽文件到浏览器并实现文件上传下载功能代码HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法HTML5 FormData 方法介绍以及实现文件上传示例

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网