¿Has jugado una carta de scratch? Del tipo que puede ganar por accidente. Hoy compartiré con ustedes un efecto de tarjeta de scratch basado en la tecnología HTML5. Simplemente sostenga el mouse en la PC, y en el teléfono, solo necesita sostener el dedo y rayar suavemente la capa para simular el efecto de rasguño real.
Utilizamos el lienzo de lienzo de HTML5, combinado con la API que proporciona, para dibujar una máscara gris en el elemento de lona y luego dibujar una figura transparente detectando el movimiento y los gestos del mouse del usuario. De esta manera, puede ver la imagen real bajo el fondo del lienzo y lograr el efecto de la tarjeta de rascar.
HtmlSolo necesitamos agregar el elemento de etiqueta de lona a la página, y el resto depende de JavaScript. Tenga en cuenta que el elemento Canvas es un elemento que solo existe en HTML5 y se ejecuta en navegadores modernos que admiten HTML5.
Copiar el código