返回列表 回复 发帖

[JavaScript] 刮刮卡来了,试试运气?

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>刮刮卡来了,试试运气?</title>
  7.     <meta name="keywords" content="">
  8.     <meta name="description" content="">
  9.     <style>
  10. * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.         
  16.         html {
  17.             width: 100vw;
  18.             height: 100vh;
  19.         }
  20.         
  21.         body {
  22.             min-height: 100%;
  23.             padding: 1vw;
  24.             text-align: center;
  25.         }
  26.         
  27.         #card {
  28.             width: 540px;
  29.             height: 200px;
  30.             margin: 0 auto;
  31.             background: url(图片地址) no-repeat center;
  32.             border: 1px solid rgba(0, 0, 0, .5);
  33.         }
  34. </style>
  35. <base target='_blank'>
  36. </head>
  37. <body>


  38. <h1>刮刮卡来了,试试运气?</h1>
  39. <div id="card">
  40.   <canvas id="canvasOne" width="500" height="300"></canvas>
  41. </div>


  42. <script>
  43. window.addEventListener('load', eventWindowLoaded, false);

  44.         var Debugger = function() {};

  45.         Debugger.log = function(message) {
  46.             try {
  47.                 console.log(message);
  48.             } catch (exception) {
  49.                 return;
  50.             }
  51.         }

  52.         function eventWindowLoaded() {
  53.             canvasApp();
  54.         }

  55.         function canvasApp() {

  56.             Debugger.log('Drawing Canvas');

  57.             var canvas = document.getElementById('canvasOne');
  58.             var ctx = canvas.getContext('2d');
  59.             var card = document.getElementById('card');
  60.             var width = card.offsetWidth;
  61.             var height = card.offsetHeight;
  62.             canvas.width = width;
  63.             canvas.height = height;

  64.             var isDrawing;
  65.             var lastPoint;
  66.             var brush = new Image();

  67.             brush.src = '图片地址';

  68.             canvas.addEventListener('mousedown', mouseDown, false);
  69.             canvas.addEventListener('touchstart', mouseDown, false);
  70.             canvas.addEventListener('mousemove', mouseMove, false);
  71.             canvas.addEventListener('touchmove', mouseMove, false);
  72.             canvas.addEventListener('mouseup', mouseUp, false);
  73.             canvas.addEventListener('touchend', mouseUp, false);

  74.             function distanceBetween(point1, point2) {
  75.                 return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
  76.             }

  77.             function angleBetween(point1, point2) {
  78.                 return Math.atan2(point2.x - point1.x, point2.y - point1.y);
  79.             }

  80.             // Only test every 'stride' pixel. 'stride'x faster
  81.             // but might lead to inaccuracy
  82.             function getFilledInPixels(stride) {
  83.                 if (!stride || stride < 1) {
  84.                     stride = 1;
  85.                 }

  86.                 var pixels = ctx.getImageData(0, 0, width, height);
  87.                 var pdata = pixels.data;
  88.                 var len = pdata.length;
  89.                 var total = len / stride;
  90.                 var count = 0;
  91.                 // console.log(len);


  92.                 // Iterate over all pixels
  93.                 for (var i = 0; i < len; i += stride) {
  94.                     if (parseInt(pdata[i]) === 0) {
  95.                         count++;
  96.                     }
  97.                 }

  98.                 return Math.round((count / total) * 100);
  99.             }

  100.             function getMouse(e, canvas) {
  101.                 var offsetX = 0;
  102.                 var offsetY = 0;
  103.                 var mx;
  104.                 var my;

  105.                 if (canvas.offsetParent !== undefined) {
  106.                     do {
  107.                         offsetX += canvas.offsetLeft;
  108.                         offsetY += canvas.offsetTop
  109.                     } while ((canvas = canvas.offsetParent));
  110.                 }

  111.                 mx = (e.pageX || e.touches[0].clientX) - offsetX;
  112.                 my = (e.pageY || e.touches[0].clientY) - offsetY;

  113.                 return {
  114.                     x: mx,
  115.                     y: my
  116.                 }
  117.             }

  118.             function handlePercentage(filledInPixels) {
  119.                 filledInPixels = filledInPixels || 0;
  120.                 console.log(filledInPixels + '%');
  121.                 if (filledInPixels > 40) {
  122.                     canvas.parentNode.removeChild(canvas);
  123.                 }
  124.             }

  125.             function mouseDown(e) {
  126.                 isDrawing = true;
  127.                 lastPoint = getMouse(e, canvas);
  128.             }

  129.             function mouseMove(e) {
  130.                 if (!isDrawing) {
  131.                     return;
  132.                 }

  133.                 var currentPoint = getMouse(e, canvas);
  134.                 var dist = distanceBetween(lastPoint, currentPoint);
  135.                 var angle = angleBetween(lastPoint, currentPoint);
  136.                 var x;
  137.                 var y;

  138.                 for (var i = 0; i < dist; i++) {
  139.                     x = lastPoint.x + Math.sin(angle) * i - 25;
  140.                     y = lastPoint.y + Math.cos(angle) * i - 25;
  141.                     ctx.globalCompositeOperation = 'destination-out';

  142.                     // 这里需要修改
  143.                     ctx.drawImage(brush, x, y);

  144.                     // 或者下面的笔擦
  145.                     // var radius = 30;
  146.                     // var fillStyle = '#fff';
  147.                     // ctx.beginPath();
  148.                     // ctx.arc(x, y, radius, 0, Math.PI * 2, true);
  149.                     // ctx.closePath();
  150.                     // ctx.fill();
  151.                 }

  152.                 lastPoint = currentPoint;
  153.                 handlePercentage(getFilledInPixels(32));
  154.             }

  155.             function mouseUp(e) {
  156.                 isDrawing = false;
  157.             }

  158.             function draw() {
  159.                 ctx.save();
  160.                 ctx.fillStyle = '#ddd';
  161.                 ctx.fillRect(0, 0, width - 2, height - 2);
  162.                 ctx.restore();
  163.             }

  164.             draw();

  165.         }
  166. </script>

  167. </body>
  168. </html>
复制代码
http://www.w3cplus.com/canvas/compositing.html
返回列表