“This is the 8th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Implementation effect

Common activity page scraping award effect

Train of thought

Step 1: First make the content of the scratch prize HTML, and then use canvas to draw a layer of mask to cover the content of the prize. You can use canvas to write three words “scratch” on the mask, which looks more effective. Step 2: Next, use the mouse (PC side), and press down the covered area with your finger (WAP side). Draw a transparent circle with canvas in the area where the point is pressed, and then the prize copy under the covered layer will be displayed. Step 3: When judging that the scraped area accounts for 80% of the total canvas area (custom), we need to remove the mask every time we touch the mask, that is, calculate the area during scraping.

implementation

Step 1: do a good job of prize content DOM here STYLE I will not paste, style can be written at will

<div class="scrapeLottoBox">
  <div class="scrapeLottoBox-btn">Scraping the preferential</div>
  <div class="scrapeLottoBox-price"><span>Selections of 123</span>00.</div>
</div>
Copy the code

Step 2: Use canvas to draw a mask and cover 123.

<div class="scrapeLottoBox">
  <div class="scrapeLottoBox-btn">Scraping the preferential</div>
  <div class="scrapeLottoBox-price"><span>Selections of 123</span>00.</div><! - montmorillonite layer - ><canvas id="scrapeLottoCanvas" width="150" height="70"></canvas>
</div>

let myCanvas = document.getElementById("scrapeLottoCanvas");
// Build the environment and fill it with a mask color
let cxt = myCanvas.getContext("2d"); // Create canvas
cxt.globalAlpha = 1; // Set transparency
cxt.fillStyle = "#ccc"; // Set the background to grey
cxt.fillRect(0.0.300.140); // Draw the fill rectangle 300 and 140 for width and height
// Draw text "scratch"
cxt.fillStyle = "# 000";
cxt.font = "18px Microsoft Yahei";
cxt.textAlign = "center";
cxt.textBaseline = "middle";
cxt.fillText('Scratch'.73.35.100);
Copy the code

Effect:

Step 3: When clicking or pressing to move, the canvas draws a small transparent circle

let flag = false;
// Event listener on PC
myCanvas.addEventListener('mousedown'.function (e) {
  flag = true;
  drawArc(e) / / to draw
})
myCanvas.addEventListener('mousemove'.function (e) {
  if (flag == true) {
    drawArc(e) / / to draw}})// WaP event listener
myCanvas.addEventListener('touchstart'.function (e) {
  flag = true;
  drawArc(e) / / to draw
})
myCanvas.addEventListener('touchmove'.function (e) {
  if (flag == true) {
    drawArc(e) / / to draw}})// Draw the area
function drawArc(e) {
  var canvasPos = myCanvas.getBoundingClientRect(); // Gets the absolute position of the rectangle canvas on the page
  var pageScrollTop = document.documentElement.scrollTop || document.body.scrollTop; // Get the height of the page scroll (handle the scraping after the page slide, calculate the coordinate point)
  var pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; / / in the same way
  var mouseX = (e.pageX || e.targetTouches[0].pageX) - canvasPos.left - pageScrollLeft; // Click the x-distance of the point coordinate - x-distance of the top left corner of the rectangle - x-distance of the page rolled out
  var mouseY = (e.pageY || e.targetTouches[0].pageY) - canvasPos.top - pageScrollTop; / / in the same way
  cxt.globalCompositeOperation = "destination-out"; // The intersecting parts are not displayed
  cxt.beginPath(); // Start a path
  cxt.fillStyle = "white"; / / white
  cxt.moveTo(mouseX, mouseY); // Move to position mouseX,mouseY
  cxt.arc(mouseX, mouseY, 6.0.2 * Math.PI); // Draw a circle with radius 6
  cxt.fill(); / / fill
}
Copy the code

Effect:

Step 4: When the mouse or finger is lifted, calculate the area that has been scratched

// Event listener on PC
myCanvas.addEventListener('mouseup'.function () {
  flag = false;
  calcArea(); / / calculate
})
// WaP event listener
myCanvas.addEventListener('touchend'.function () {
  flag = false;
  calcArea(); / / calculate
})

// Compute area
function calcArea() {
  // Get the pixel data
  var myImg = cxt.getImageData(0.0, myCanvas.width, myCanvas.height);
  var num = 0;
  var max = myImg.data.length / 4; // Use 1/4 to calculate the region ratio to save calculation overhead
  for (var i = 0; i < myImg.data.length; i += 4) {
    if (myImg.data[i + 3] = =0) { num++; }}// 0-1 indicates the percentage of the area, and 80% indicates that all masks are cleared
  if (num >= max * 0.8) {
    myCanvas.remove()
  }
}
Copy the code

Done!

Paste the full code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < script SRC =" https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js "> < / script > < span style> /** ** scrapeLottoBox{width: 285px; height: 120px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: url('https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ace29d7c26e4e88a51ec638111d0a3f~tplv-k3u1fbpfcp-watermark.image' ) center/100% no-repeat; } .scrapeLottoBox-btn{ font-size: 20px; color: #fff; width: 50px; position: absolute; right: 25px; top: 30px; text-align: center; } .scrapeLottoBox-price{ color: #f51e55; width: 150px; text-align: center; position: absolute; left: 30px; top: 25px; font-size: 16px; } .scrapeLottoBox-price>span{ font-size: 40px; line-height: 67px; font-weight: 700; } .scrapeLottoBox>#scrapeLottoCanvas{ position: absolute; left: 30px; top: 25px; } </style> </head> <body> <div class="scrapeLottoBox"> <div class="scrapeLottoBox" Class = "scrapeLottoBox - price" > < span > 123 < / span > selections. 00 < / div > <! <canvas id="scrapeLottoCanvas" width="150" height="70"></canvas> </div> <script createScrapeLotto() function createScrapeLotto() { let myCanvas = document.getElementById("scrapeLottoCanvas"); // let CXT = myCanvas. GetContext ("2d"); cxt.globalAlpha = 1; cxt.fillStyle = "#ccc"; cxt.fillRect(0, 0, 300, 140); // text cxt.fillStyle = "#000"; Font-family: "Microsoft Yahei "; cxt.textAlign = "center"; cxt.textBaseline = "middle"; Cxt. fillText(' scratch ', 73, 35, 100); // pc let flag = false; myCanvas.addEventListener('mousedown', function (e) { flag = true; drawArc(e) }) myCanvas.addEventListener('mousemove', function (e) { if (flag == true) { drawArc(e) } }) myCanvas.addEventListener('mouseup', function () { flag = false; calcArea(); }) // wap myCanvas.addEventListener('touchstart', function (e) { flag = true; drawArc(e) }) myCanvas.addEventListener('touchmove', function (e) { if (flag == true) { drawArc(e) } }) myCanvas.addEventListener('touchend', function () { flag = false; calcArea(); }) / / painting area function drawArc (e) {var canvasPos = myCanvas. GetBoundingClientRect (); var pageScrollTop = document.documentElement.scrollTop || document.body.scrollTop; var pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var mouseX = (e.pageX || e.targetTouches[0].pageX) - canvasPos.left - pageScrollLeft; var mouseY = (e.pageY || e.targetTouches[0].pageY) - canvasPos.top - pageScrollTop; cxt.globalCompositeOperation = "destination-out"; cxt.beginPath(); cxt.fillStyle = "white"; cxt.moveTo(mouseX, mouseY); cxt.arc(mouseX, mouseY, 6, 0, 2 * Math.PI); cxt.fill(); } function calcArea() {var myImg = cxt.getimageData (0, 0, mycanvas.width, mycanvas.height); var num = 0; var max = myImg.data.length / 4; for (var i = 0; i < myImg.data.length; i += 4) { if (myImg.data[i + 3] == 0) { num++; }} the if (num > = Max * 0.4) {myCanvas. Remove ()}}} < / script > < / body > < / HTML >Copy the code

conclusion

Diligent in hands-on practice to see real knowledge!