Canvas-Rubbelkarten-Plug-in, das Mobiltelefone unterstützt

Kurzes Tutorial

ScratchCard ist ein HTML5-Canvas-Rubbelkarten-Plug-in, das Mobiltelefone unterstützt. Dieses Rubbellos-Plugin unterstützt mobile Touch-Events und bietet eine Rückruffunktion für Rubbellose. Es ist einfach zu bedienen und hat sehr gute Effekte.

Verwendung

Fügen Sie die Scratch.js-Datei in die Seite ein.

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

HTML-Struktur

Verwenden Sie die folgende HTML-Struktur, um ein Rubbellos zu erstellen:

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

CSS-Stil

für Rubbellos. Fügen Sie das hinzu folgenden CSS-Stilen.

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

Initialisierungs-Plug-in

Verwenden Sie vor dem Ende des -Tags unten auf der Seite den folgenden Code, um ein Rubbellosobjekt zu instanziieren.

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

Konfigurationsparameter

Die verfügbaren Konfigurationsparameter des Canvas-Rubbelkarten-Plug-ins sind:

• canvasId: die ID der Leinwand .

• imageBackground: Hintergrundbild (Bild, das nach dem Scratchen erscheint).

• pictureOver: Vordergrundbild.

• sceneWidth: Breite der Leinwand.

• sceneHeight: die Höhe der Leinwand.

• Radius: der Radius des geräumten Bereichs.

• nPunkte: Die Anzahl der Lärmpunkte im geräumten Bereich.

• Prozent: Wie viele Bereiche müssen geräumt werden, bevor die Leinwand geräumt wird.

• Cursor: Cursor.

• png: Cursor im PNG-Format.

• x: Position x verschieben.

• y: Position y verschieben.

• cur: Cursor im Cur-Format (wird vom IE verwendet).

Die Github-Adresse des ScratchCard-Canvas-Rubbelkarten-Plug-Ins lautet: https://github.com/Masth0/ScratchCard

Das Obige ist das Canvas-Rubbellos Das unterstützt Mobiltelefone Der Inhalt des Plug-Ins. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!