Plug-in de carte à gratter Canvas compatible avec les téléphones mobiles

Bref tutoriel

ScratchCard est un plug-in de carte à gratter en toile HTML5 qui prend en charge les téléphones mobiles. Ce plug-in de carte à gratter prend en charge les événements tactiles mobiles et fournit une fonction de rappel pour les cartes à gratter. Il est simple et facile à utiliser, et l'effet est très bon.

Utilisation

Introduisez le fichier Scratch.js dans la page.

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

Structure HTML

Utilisez la structure HTML suivante pour créer une carte à gratter :

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

Style CSS

pour la carte à gratter Ajoutez le styles CSS suivants.

.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;
}

Plug-in d'initialisation

Avant la fin de la balise 6c04bd5ca3fcae76e30b72ad730ca86d en bas de page, utilisez le code suivant pour instancier un objet carte à gratter.

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}
});

Paramètres de configuration

Les paramètres de configuration disponibles du plug-in de carte à gratter Canvas sont :

• canvasId : l'identifiant du canevas .

• imageBackground : image de fond (image qui apparaît après grattage).

• pictureOver : image de premier plan.

• sceneWidth : largeur de la toile.

• sceneHeight : la hauteur de la toile.

• rayon : le rayon de la zone dégagée.

• nPoints : Le nombre de points de bruit dans la zone dégagée.

• pourcentage : combien de zones à nettoyer avant de nettoyer la toile.

• curseur : curseur.

• png : Curseur au format png.

• x : Déplacer la position x.

• y : Déplacer la position y.

• cur : Curseur au format cur (utilisé par IE).

L'adresse github du plug-in de carte à gratter en toile ScratchCard est : https://github.com/Masth0/ScratchCard

Ce qui précède est la carte à gratter en toile qui prend en charge les téléphones mobiles Le contenu du plug-in, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !