Crear un ticket de Scratch con JavaScript y Canvas-Scratch-it

Vista prévia

Descripción

Scratch-es una biblioteca de JavaScript para crear un ticket de lotería responsive y amigable para móviles que revela la imagen oculta al rayar la superposición.

See also:

• tarjeta de rasca con JavaScript puro â & #128; & #147; ScratchCard
• tarjeta de memoria virtual con JavaScript y Canvas â & #128; & #147; Touch2Reveal

Funcionamiento

Inserte una imagen en su ticket de Scratch.

<div id="scratch">

<img src="image-to-reveal.jpg">
</div>

Inserte el archivo JavaScript ' ScratchIt. min. js ' en el documento.

<script src="ScratchIt.min.js"></script>

Inicialice la biblioteca Scratch-it y especifique el elemento contenedor, la imagen de superposición y la imagen del pincel.

• el: El elemento DOM principal que el lienzo se anexará a
• overlayUrl: La dirección URL de la imagen que se mostrará
• brushUrl: La dirección URL de la imagen que actuará como el pincel para borrar el contenido de la imagen de superposición

if(ScratchIt.isSupported()){

//
ScratchIt(el, overlayUrl, brushUrl)

ScratchIt(document.getElementById('scratch'), './images/overlay.png', './images/brush1.png');
}

Aplica un controlador de eventos al ticket de Scratch que se activará una vez que se haya quitado el 50% de la superposición.

• callback: Se ha quitado una función que se llamará después de un cierto porcentaje de la imagen de superposición.
• umbral: Un porcentaje entre 0 y 100. Este porcentaje de píxeles debe ser visible para el usuario antes de que se desencadene el revealCallback.

function onReveal(){

// do something
}

if(ScratchIt.isSupported()){

//
ScratchIt(el, overlayUrl, brushUrl, onReveal, revealPercent)

ScratchIt(document.getElementById('scratch'), './images/overlay.png', './images/brush1.png', onReveal, 50);
}

Registro de cambios

11/12/2018

• arreglado para Vue. js