java语言 百分网手机站

如何使用JS实现PC端移动端的刮卡效果

时间:2020-10-24 15:35:49 java语言 我要投稿

如何使用JS实现PC端移动端的刮卡效果

  导语:javascript是一门神奇的语言,可以实现诸多效果的设计,下面小编要给大家提供的是如何使用JS实现PC端移动端的刮卡效果,更多详情请关注应届毕业生考试网。

  具体代码:

  <!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>

【如何使用JS实现PC端移动端的刮卡效果】相关文章:

1.移动端网页设计技巧

2.移动端网页设计方法

3.移动端字体的设计准则

4.移动端网页设计的技巧

5.移动端网页设计尺寸标准

6.简化移动端网页设计的步骤

7.移动端网页设计的技巧指导

8.移动端网页界面设计技巧

9.移动端网页设计常见问题和技巧