刮刮卡涂抹效果，可设置百分比，擦除效果，支持pc，手机端支持不好 2020草莓季升磅 

body {
  margin: 0;
}
figcaption{
  font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
#bridge {
  display: block;
  margin: 0 auto;
  background-image: url("../img/scratch-2.jpg");
  background-image: -webkit-image-set(url("../img/scratch-2.jpg") 1x, url("../img/scratch-2x.jpg") 2x);
  background-size: cover;
  width: 100%;
  max-width: 750px;
  height: auto;
  cursor: crosshair;
  cursor: url(../img/circular-cursor.png) 53 53, crosshair;
}

#bridgeContainer {
  text-align: center;
  font-family: Avenir, sans-serif;
}

#bridgeContainer figcaption {
  margin-top: 2rem;
}

 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支持移动手机的HTML5 Canvas刮刮卡特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <link rel="stylesheet" href="css/style.css">
    <!--[if IE]>
        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
      <script type="text/javascript" src="jquery-1.6.4.min.js"></script>

</head>
<body>
    <div>
        
        <figure id="bridgeContainer" style="margin-top: 50px;">
        <figcaption>建议在服务器环境下使用，否则会提示：Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.</figcaption>
            <canvas id="bridge" width="750" height="465"></canvas>
              <figcaption>呱呱中大奖！（使用鼠标或移动手机中手指滑动来刮奖）</figcaption>
        </figure>
        
    </div>

    <script type="text/javascript">
  var bridge = document.getElementById("bridge"),
    bridgeCanvas = bridge.getContext('2d'),
    brushRadius = (bridge.width / 100) * 5,
    img = new Image();

  console.log(brushRadius);
  /*if (brushRadius < 50) { brushRadius = 50 }*/

  img.onload = function(){
    bridgeCanvas.drawImage(img, 0, 0, bridge.width, bridge.height);
  }
  img.loc = 'img/';
 img.filename = 'scratch-1.jpg';
  if (window.devicePixelRatio >= 2) {
    var nameParts = img.filename.split('.');
    img.src = img.loc + nameParts[0]+"-2x"+"."+nameParts[1];
  } else {
    img.src = img.loc + img.filename;
  }

  function detectLeftButton(event) {
    if ('buttons' in event) {
      return event.buttons === 1;
    } else if ('which' in event) {
      return event.which === 1;
    } else {
      return event.button === 1;
    }
  }

  function getBrushPos(xRef, yRef) {
    var bridgeRect = bridge.getBoundingClientRect();
    return {
      x: Math.floor((xRef-bridgeRect.left)/(bridgeRect.right-bridgeRect.left)*bridge.width),
      y: Math.floor((yRef-bridgeRect.top)/(bridgeRect.bottom-bridgeRect.top)*bridge.height)
    };
  }

  function drawDot(mouseX,mouseY){
    bridgeCanvas.beginPath();
    bridgeCanvas.arc(mouseX, mouseY, brushRadius, 0, 2*Math.PI, true);
    bridgeCanvas.fillStyle = '#000';
    bridgeCanvas.globalCompositeOperation = "destination-out";
    bridgeCanvas.fill();
      /*执行函数*/
    percent = getPercent();
    console.log(percent);
    callback(function () {
      $("#bridge").fadeOut(100);
    });
  }

  var percent=null;
  var percented = 30; /*画的比例*/
  /*补充函数*/
  function getPercent() {
    var percent;
    var counter = 0;  /*number of pixels clear*/
    var imageData = bridgeCanvas.getImageData(0, 0, bridge.width, bridge.height);

    var imageDataLength = imageData.data.length;

    for(var i = 0; i < imageDataLength; i += 4) {
      if (imageData.data[i] === 0 && imageData.data[i+1] === 0 && imageData.data[i+2] === 0 && imageData.data[i+3] === 0) {
        counter++;
      }
    }

    if (counter >= 1) {
      percent = (counter / (bridge.width * bridge.height)) * 100;

    } else {
      percent = 0;
    }

    return percent;
  }


  function callback(callback) {
    if (callback != null && percent >= percented) {
      callback();
    }
  };


  bridge.addEventListener("mousemove", function(e) {
    var brushPos = getBrushPos(e.clientX, e.clientY);
    var leftBut = detectLeftButton(e);
    if (leftBut == 1) {
      drawDot(brushPos.x, brushPos.y);
    }
  }, false);

  bridge.addEventListener("touchmove", function(e) {
    e.preventDefault();
    var touch = e.targetTouches[0];
    if (touch) {
      var brushPos = getBrushPos(touch.pageX, touch.pageY);
      drawDot(brushPos.x, brushPos.y);
    }
  }, false);
</script>
</body>
</html>

 原地址：http://www.htmleaf.com/html5/html5-canvas/201608133862.html

链接

 

posted @ 2019-12-11 17:46  Shimily  阅读(203)  评论(0)    收藏  举报