Scraping award based on canvas

Time:2021-11-22

The company is going to have an event. A car washing game similar to scratch award. I found some codes and ideas on the Internet and imitated one myself. My thoughts are as follows:

Put some information randomly into a div (e.g. thank you for your patronage, won the prize), and then cover the div with canvas canvas. By scraping off the color layer on the canvas, the following information is displayed.


Some CSS styles:

*{
            padding: 0;
            margin: 0;
        }
        .canvas-box{
            width: 300px;
            height: 400px;
            margin: auto;
            border: 1px dashed deeppink;
            margin-top: 20px;
            font-size: 50px;
            text-align: center;
            line-height: 400px;
            position: relative;
        }
        #canvas{
            position: absolute;
            left: 0;
            top: 0;
        }

DOM structure:

<div class="canvas-box">
    < canvas id = "canvas" width = "300" height = "400" > your browser is too old. Please replace or upgrade your browser</ canvas>
</div>

JS code:

var canvas=document.getElementById("canvas");
            var canvasBox=document.getElementsByClassName("canvas-box")[0];

            var finger;// Touch screen finger
            var whiteZone=0;// Scraped area

            var pen=canvas.getContext("2d");

            Var textarr = ['thank you for your patronage!','Thank you for your patronage! ','Thank you for your patronage!','Thank you for your patronage! ','congratulations on winning!','congratulations on winning! ','congratulations on winning!','congratulations on winning! ','congratulations on winning!'];

            var W=canvas.offsetWidth;
            var H=canvas.offsetHeight;

            var dataList;

            canvasBox.appendChild(document.createTextNode(textArr[Math.floor(Math.random()*10)]));

            //The path must be closed here to prevent mutual influence
            pen.beginPath();
            pen.fillStyle="#ccc";
            pen.fillRect(0,0,500,500);
            pen.closePath();



            //Specifies how elements that overlap each other are currently transparent
            pen.globalCompositeOperation="destination-out";

            //Add an event to the canvas, get the finger position when the finger moves, and draw a circle continuously at this position
             canvas.addEventListener("touchmove",function(e){
            //e. Touches is the list of fingers, [0] is the first

                 finger= e.touches[0];

                 pen.beginPath();
                 pen.arc(finger.pageX,finger.pageY,15,0,Math.PI*2);

                 pen.fill();
                 pen.closePath();
             })

            //When the finger is released, calculate the percentage of the hanging area in the total area. More than 70% prompt OK
            //The getimagedata method obtains pixels. The first two parameters are to obtain the X and Y coordinates of the upper left corner of the pixel area. The last two parameters are the height and width of the pixel area.
            //Traverse each pixel, and a value of 0 is the scraped pixel
            canvas.addEventListener("touchend",function(){
                    dataList= pen.getImageData(0,0,300,400);
                    for(var i=0;i<dataList.data.length;i++){
                        if(dataList.data[i]==0){
                            whiteZone++;
                        }
                    }

                if(whiteZone>=dataList.data.length*0.7){
                    alert("ok!!")
                }
            },false)
A small bug here is that you can see the final result by looking at the elements. Of course, this is just an idea. So what better way can you tell me.

Recommended Today

Day 19/100 React Fabric. JS to realize the dragging and changing polygon

1. Demand Realize canvas to draw polygons. 2. Effect 3. Code The official demo is an HTML version. I rewritten the react version. // Copyright 2021 zhaoarden import React, { useState,useCallback } from ‘react’; import { fabric } from “fabric”; import { Button } from ‘antd’; class Polygon extends React.Component { constructor(props) { super(props); this.state={ […]