无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 公司新闻 >

微信小程序店面版_js完成PC端和移动端刮卡效果

时间:2021-01-12 14:19来源:微信小程序店面版 作者:jianzhan 点击:
js完成PC端和手机端刮卡实际效果 本文关键为大伙儿详尽详细介绍了js完成PC端和手机端刮卡实际效果,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的
js实现PC端和移动端刮卡效果       这篇文章主要为大家详细介绍了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="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() {
 //剩余刮卡次数
 $('.(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() {
 "
 } 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"]); //
 /* 页面加载后开始初始化画布 */
 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" / 
 div id="top" 
 div id="prize" 
 span id="prompt" /span 
 span id="ok" 领取奖品 /span 
 span id="no" 再来一次 /span 
 /div 
 canvas id="c1" /canvas 
 /div 
 div 
 您还有 span /span 次刮卡机会
 /div 
 img src="img/guize.png" / 
 !-- 遮罩层1抽奖次数已经用完-- 
 div 
 img src="img/pop1.png" / 
 /div 
 div 
 img src="img/pop2.png" id="pop2" / 
 /div 
 /body 
 /html 

源码下载:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866