Вы играли в Scratch Card? Тот, который может выиграть случайно. Сегодня я поделюсь с вами эффектом карты Scratch на основе технологии HTML5. Просто удерживайте мышь на ПК, и на телефоне вам просто нужно держать палец и осторожно поцарапать слой, чтобы имитировать реальный эффект царапины.
Мы используем холст HTML5 на холсте, в сочетании с API, который он предоставляет, чтобы нарисовать серую маску на элементе холста, а затем нарисуем прозрачную фигуру, обнаружив движение и жесты мыши пользователя. Таким образом, вы можете увидеть реальную картинку под фонами холста и достичь эффекта карты царапины.
HTMLНам нужно только добавить элемент тега Canvas на страницу, а остальное зависит от JavaScript. Обратите внимание, что элемент Canvas - это элемент, который существует только в HTML5 и работает в современных браузерах, которые поддерживают HTML5.
Скопировать код