Canvas scratch card plug-in that supports mobile phones

Brief Tutorial

ScratchCard is an HTML5 canvas scratch card plug-in that supports mobile phones. This scratch card plug-in supports mobile touch events and provides a callback function for scratch cards. It is easy to use and has very good effects.

Usage method

Introduce the Scratch.js file into the page.

<script type="text/javascript" src="js/Scratch.js"></script>

HTML Structure

Use the following HTML structure to make a scratch card:

<div class="scratch_container">
  <div class="scratch_viewport">
    <!-- result picture -->
    <canvas id="js-scratch-canvas"></canvas>
  </div>
</div>

CSS Style

Add the following CSS for the scratch card style.

.scratch_container {
  position: relative;
  margin: 0 auto;
  max-width: 1024px;
}
 
.scratch_viewport {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  z-index: 0;
}
 
.scratch_picture-under {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: -1;
}
 
.scratch_container canvas {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

Initialization plug-in

Use the following code to instantiate a scratch card object before the end of the tag at the bottom of the page.

var scratch = new Scratch({
    canvasId: 'js-scratch-canvas',
    imageBackground: 'loose.jpg',
    pictureOver: 'foreground.jpg',
    cursor: {
        png: 'piece.png',
        cur: 'piece.cur',
        x: '20',
        y: '17'
    },
    radius: 20,
    nPoints: 100,
    percent: 50,
    callback: function () {
      alert('I am Callback.');
    },
    pointSize: { x: 3, y: 3}
});

Configuration parameters

The available configuration parameters of the Canvas scratch card plug-in are:

• canvasId: the id of the canvas.

• imageBackground: background image (image that appears after scratching).

• pictureOver: Foreground picture.

• sceneWidth: The width of canvas.

• sceneHeight: The height of canvas.

• radius: The radius of the cleared area.

• nPoints: The number of noise points in the cleared area.

• percent: How many areas to clear before clearing the canvas.

• cursor: cursor.

• png: Cursor in png format.

• x: Move position x.

• y: Move position y.

• cur: Cursor in cur format (used by IE).

The github address of the ScratchCard canvas scratch card plug-in is: https://github.com/Masth0/ScratchCard

The above is the canvas scratch card that supports mobile phones The content of the plug-in, please pay attention to the PHP Chinese website (www.php.cn) for more related content!