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.

HTML Structure

Use the following HTML structure to make a scratch card:

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 6c04bd5ca3fcae76e30b72ad730ca86d 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!