js实现PC端和移动端刮卡效果
发布时间 - 2026-01-10 22:59:09 点击率：次本文实例为大家分享了js刮卡效果的具体代码，供大家参考，具体内容如下
效果图：
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>小月博客刮刮卡案例分享</title>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background: #E34830;
position: relative;
}
.banner1 {
display: block;
width: 100%;
/*height: auto;*/
overflow: hidden;
}
.ggl {
position: relative;
width: 85.6%;
height: 90px;
margin: -5px auto;
background: url(img/ggl.png) no-repeat center center;
background-size: 100% 100%;
border: 1px solid blue;
}
.canvas {
position: absolute;
top: 2px;
left: 2.5%;
width: 95%;
height: 82px;
line-height: 82px;
text-align: center;
z-index: 2;
border: 1px solid black;
}
.info {
position: absolute;
top: 2px;
left: 2.5%;
width: 95%;
height: 82px;
text-align: center;
}
.info span {
display: block;
font-size: 18px;
}
#prompt {
line-height: 40px;
}
.btn {
position: relative;
width: 50%;
height: 35px;
line-height: 35px;
background: #df412b;
color: #fff;
border-radius: 5px;
margin: 0 auto;
z-index: 1;
}
.guize {
display: block;
width: 85.6%;
height: auto;
margin: 5% auto 10% auto;
border-radius: 5px;
border: 1px solid black;
}
.num {
width: 90%;
margin: 0 auto;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
margin-top: 5%;
border: 1px solid black;
}
#ok,
#no {
display: none;
}
.pop {
position: fixed;
left: 0;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: none;
}
.pop img {
width: 100%;
height: auto;
overflow: hidden;
margin: 15% auto;
}
</style>
<script>
//控制刮卡次数
var t = 0;
//初始化所有数据并且随机产生奖品
var initialize = function() {
//剩余刮卡次数
$('.num1').html(4 - t);
//随机数
function getRandomNum(lbound, ubound) {
return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
}
var r = getRandomNum(1, 100);
var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length; i++) {
btn[i].style.zIndex = '1';
}
document.getElementById("no").style.display = "none";
document.getElementById("ok").style.display = "none";
//初始化涂抹面积
isOk = 0;
if (r < t * 33) {
document.getElementById("prompt").innerHTML = "恭喜您，中奖了！"
var ok = document.getElementById("ok");
ok.style.display = "block";
//点击领取奖品
ok.onclick = function() {
window.location.href = "prize.html"
};
} else {
document.getElementById("prompt").innerHTML = "很遗憾，未中奖！"
document.getElementById("no").style.display = "block";
}
};
var c1; //画布
var ctx; //画笔
var ismousedown; //标志用户是否按下鼠标或开始触摸
var isOk = 0; //标志用户是否已经刮开了一半以上
var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]); //这是为了不同分辨率上配合@media自动调节刮的宽度
/* 页面加载后开始初始化画布 */
window.onload = function() {
initialize();
c1 = document.getElementById("c1");
//这里很关键，canvas自带两个属性width、height,我理解为画布的分辨率，跟style中的width、height意义不同。
//最好设置成跟画布在页面中的实际大小一样
//不然canvas中的坐标跟鼠标的坐标无法匹配
c1.width = c1.clientWidth;
c1.height = c1.clientHeight;
ctx = c1.getContext("2d");
//PC端的处理
c1.addEventListener("mousemove", eventMove, false);
c1.addEventListener("mousedown", eventDown, false);
c1.addEventListener("mouseup", eventUp, false);
//移动端的处理
c1.addEventListener('touchstart', eventDown, false);
c1.addEventListener('touchend', eventUp, false);
c1.addEventListener('touchmove', eventMove, false);
//初始化
initCanvas();
}
//初始化画布，画灰色的矩形铺满
function initCanvas() {
//网上的做法是给canvas设置一张背景图片，我这里的做法是直接在canvas下面另外放了个div。
//c1.style.backgroundImage="url(中奖图片.jpg)";
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = '#aaaaaa';
ctx.fillRect(0, 0, c1.clientWidth, c1.clientHeight);
ctx.fill();
ctx.font = "Bold 30px Arial";
ctx.textAlign = "center";
ctx.fillStyle = "#999999";
ctx.fillText("刮一刮", c1.width / 2, 50);
//把这个属性设为这个就可以做出圆形橡皮擦的效果
//有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法
ctx.globalCompositeOperation = 'destination-out';
}
//鼠标按下 和 触摸开始
function eventDown(e) {
e.preventDefault();
ismousedown = true;
}
//鼠标抬起 和 触摸结束
function eventUp(e) {
e.preventDefault();
//得到canvas的全部数据
var a = ctx.getImageData(0, 0, c1.width, c1.height);
var j = 0;
for (var i = 3; i < a.data.length; i += 4) {
if (a.data[i] == 0) j++;
}
//当被刮开的区域等于一半时，则可以开始处理结果
if (j >= a.data.length / 8) {
isOk = 1;
}
ismousedown = false;
}
//鼠标移动 和 触摸移动
function eventMove(e) {
e.preventDefault();
if (ismousedown) {
if (e.changedTouches) {
e = e.changedTouches[e.changedTouches.length - 1];
}
var topY = document.getElementById("top").offsetTop;
var oX = c1.offsetLeft,
oY = c1.offsetTop + topY;
var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;
//画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = 'destination-out';
//画出来是透明的
ctx.beginPath();
ctx.arc(x, y, fontem * 1.2, 0, Math.PI * 2, true);
//下面3行代码是为了修复部分手机浏览器不支持destination-out
//我也不是很清楚这样做的原理是什么
c1.style.display = 'none';
c1.offsetHeight;
c1.style.display = 'inherit';
ctx.fill();
}
if (isOk) {
var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length; i++) {
btn[i].style.zIndex = '3';
}
document.getElementsByClassName("btn")[0].style.zIndex = "3";
}
}
//没有中奖再来一次
$("#no").click(function() {
if (t > 3) {
//因该弹出遮罩层提示您的次数已经用完了
$('.pop1').show();
$('.pop1 img').click(function() {
$('.pop1').hide();
})
} else {
t++;
//初始化按钮
document.getElementById("no").style.display = "none";
document.getElementById("ok").style.display = "none";
window.onload();
initCanvas();
}
});
</script>
</head>
<body>
<img src="img/banner1.png" class="banner1" />
<div class="ggl" id="top">
<div class="info" id="prize">
<span id="prompt"></span>
<span class="btn" id="ok">领取奖品</span>
<span class="btn" id="no">再来一次</span>
</div>
<canvas id="c1" class="canvas"></canvas>
</div>
<div class="num">
您还有<span class="num1"></span>次刮卡机会
</div>
<img src="img/guize.png" class="guize" />
<!-- 遮罩层1抽奖次数已经用完-->
<div class="pop pop1">
<img src="img/pop1.png" />
</div>
<div class="pop pop2">
<img src="img/pop2.png" id="pop2" />
</div>
</body>
</html>
源码下载：js刮卡效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
# js
# PC端刮卡效果
# js移动端刮卡效果
# js刮卡效果
# JS实现点击拉拽轮播图pc端移动端适配
# js判断PC端与移动端跳转
# js实现兼容PC端和移动端滑块拖动选择数字效果
# JS图片压缩（pc端和移动端都适用）
# js实现一个可以兼容PC端和移动端的div拖动效果实例
# 基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
# js如何判断用户是在PC端和还是移动端访问
# Javascript实现视频轮播在pc端与移动端均可
# 详解JS判断页面是在手机端还是在PC端打开的方法
# 鼠标
# 不支持
# 按下
# 自带
# 用完
# 再来一次
# 这是
# 您的
# 我也
# 随机数
# 中有
# 设为
# 开了
# 不是很
# 这样做
# 弹出
# 则可
# 您还
# 大家分享
# 画出
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
教你用AI将一段旋律扩展成一首完整的曲子
北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？
Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理
b2c电商网站制作流程,b2c水平综合的电商平台？
进行网站优化必须要坚持的四大原则
制作公司内部网站有哪些,内网如何建网站？
Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】
网站制作价目表怎么做,珍爱网婚介费用多少？
香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南
Laravel如何发送系统通知？（Notification渠道示例）
宙斯浏览器怎么屏蔽图片浏览 节省手机流量使用设置方法
Firefox Developer Edition开发者版本入口
北京专业网站制作设计师招聘,北京白云观官方网站？
微信小程序 闭包写法详细介绍
如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环
专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？
如何在宝塔面板中修改默认建站目录？
如何撰写建站申请书？关键要点有哪些？
Python结构化数据采集_字段抽取解析【教程】
javascript中的try catch异常捕获机制用法分析
网站制作大概多少钱一个,做一个平台网站大概多少钱？
Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程
如何构建满足综合性能需求的优质建站方案？
谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程
网站制作壁纸教程视频,电脑壁纸网站？
手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？
Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码？
Python面向对象测试方法_mock解析【教程】
音乐网站服务器如何优化API响应速度？
想要更高端的建设网站，这些原则一定要坚持！
Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转
如何在IIS中配置站点IP、端口及主机头？
个人网站制作流程图片大全,个人网站如何注销？
Win11怎么设置默认图片查看器_Windows11照片应用关联设置
laravel怎么用DB facade执行原生SQL查询_laravel DB facade原生SQL执行方法
Python图片处理进阶教程_Pillow滤镜与图像增强
Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】
Laravel如何处理异常和错误？（Handler示例）
重庆市网站制作公司,重庆招聘网站哪个好？
如何在服务器上三步完成建站并提升流量？
Android仿QQ列表左滑删除操作
如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】
Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】
长沙企业网站制作哪家好,长沙水业集团官方网站？
香港服务器租用费用高吗？如何避免常见误区？
Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】
html如何与html链接_实现多个HTML页面互相链接【互相】
Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案