这篇文章主要为大家详细介绍了js实现PC端和移动端刮卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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下面另外放了个p。
//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" />
<p class="ggl" id="top">
<p class="info" id="prize">
<span id="prompt"></span>
<span class="btn" id="ok">领取奖品</span>
<span class="btn" id="no">再来一次</span>
</p>
<canvas id="c1" class="canvas"></canvas>
</p>
<p class="num">
您还有<span class="num1"></span>次刮卡机会
</p>
<img src="img/guize.png" class="guize" />
<!-- 遮罩层1抽奖次数已经用完-->
<p class="pop pop1">
<img src="img/pop1.png" />
</p>
<p class="pop pop2">
<img src="img/pop2.png" id="pop2" />
</p>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
更多js实现PC端和移动端刮卡效果相关文章请关注PHP中文网！
JavaScript in Action: Contoh dan projek dunia nyataApr 19, 2025 am 12:13 AMAplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.
JavaScript dan Web: Fungsi teras dan kes penggunaanApr 18, 2025 am 12:19 AMPenggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.
Memahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AMMemahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AMPython lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.
Python vs JavaScript: Komuniti, Perpustakaan, dan SumberApr 15, 2025 am 12:16 AMPython dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.
Dari C/C ke JavaScript: Bagaimana semuanya berfungsiApr 14, 2025 am 12:05 AMPeralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.
Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AMEnjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.
Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AMAplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Dreamweaver Mac版
Alat pembangunan web visual
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
