Você já jogou uma carta de arranhão? O tipo que pode ganhar por acidente. Hoje vou compartilhar com você um efeito de cartão de arranhão com base na tecnologia HTML5. Basta segurar o mouse no PC e, no telefone, você só precisa segurar o dedo e arranhar suavemente a camada para simular o efeito de arranhão real.
Usamos a tela de lona do HTML5, combinada com a API que ele fornece, para desenhar uma máscara cinza no elemento de tela e, em seguida, desenhar uma figura transparente, detectando o movimento e os gestos do mouse do usuário. Dessa forma, você pode ver a imagem real no fundo da tela e obter o efeito da carta de arranhões.
HtmlPrecisamos adicionar apenas o elemento de tag de tela à página e o restante depende do JavaScript. Observe que o elemento Canvas é um elemento que existe apenas no HTML5 e é executado em navegadores modernos que suportam HTML5.
Copie o código