Introdução
Neste projeto, você aprenderá como criar um efeito de lupa em imagens usando o HTML Canvas. Este efeito é frequentemente visto em galerias de imagens ou sites de produtos, permitindo que os usuários passem o mouse sobre uma imagem e obtenham uma visualização ampliada de uma porção específica. O efeito de lupa fornece uma visualização detalhada sem ter que abrir uma nova janela ou página.
👀 Pré-visualização
🎯 Tarefas
Neste projeto, você aprenderá:
- Como inicializar e configurar um elemento HTML Canvas
- Como carregar uma imagem no canvas
- Como implementar ouvintes de eventos para movimentos do mouse
- Como criar funções auxiliares para o seletor e a exibição ampliada
🏆 Conquistas
Após concluir este projeto, você será capaz de:
- Usar a API Canvas para desenhar e manipular imagens
- Rastrear coordenadas do mouse e responder a eventos de movimento do mouse
- Criar um efeito de lupa copiando e exibindo uma porção de uma imagem
