Inserindo e exibindo imagens
A primeira aula do módulo de manipulação de imagens. Vamos explorar como inserir e exibir imagens no HTML Canvas, adicionando uma camada visual mais rica aos seus projetos.
Para começar, a tag <img>
em HTML é utilizada para carregar uma imagem. Vamos ver um exemplo simples:
var imagem = new Image(); imagem.src = 'caminho/para/sua/imagem.jpg'; imagem.onload = function() { contexto.drawImage(imagem, 50, 50, 100, 80); };
Aqui, criamos um novo objeto de imagem e definimos seu caminho com a propriedade src.
O evento onload
garante que a imagem esteja totalmente carregada antes de ser desenhada no Canvas usando drawImage.
As coordenadas (50, 50) indicam onde a imagem será posicionada, e as dimensões (100, 80) determinam a largura e altura.
Se deseja ajustar a escala da imagem, pode fazer isso facilmente:
imagem.onload = function() { contexto.drawImage(imagem, 50, 50, 150, 120); // Aumentando a escala para 150x120 pixels };
Além disso, se quiser cortar uma parte específica da imagem:
imagem.onload = function() { contexto.drawImage(imagem, 20, 20, 80, 60, 50, 50, 100, 80); // Cortando uma área de 80x60 pixels a partir de (20, 20) e desenhando em (50, 50) com largura 100 e altura 80 };
Isso é útil para exibir apenas partes específicas de uma imagem maior.
Veja um exemplo completo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Inserindo e Exibindo Imagens no Canvas</title> <style> canvas { border: 1px solid #000; display: block; margin: 20px auto; } </style> </head> <body> <canvas id="meuCanvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById("meuCanvas"); var contexto = canvas.getContext("2d"); // Inserindo e exibindo uma imagem var imagem = new Image(); imagem.src = 'caminho/para/sua/imagem.jpg'; imagem.onload = function() { // Desenhando a imagem original contexto.drawImage(imagem, 50, 50, 100, 80); // Aumentando a escala da imagem contexto.drawImage(imagem, 200, 50, 150, 120); // Cortando uma parte específica da imagem contexto.drawImage(imagem, 20, 20, 80, 60, 50, 150, 100, 80); }; </script> </body> </html>
Visualização do código.
Cole esse código em seu editor de código e faça modificação para entender como funciona esse conceito. Lembre-se de substituir ‘caminho/para/sua/imagem.jpg’ pelo caminho real para a sua imagem.
Agora, com esses conceitos básicos, você pode incorporar imagens em seus projetos Canvas, abrindo um mundo de possibilidades visuais.
Continue praticando, e nos próximas aulas, exploraremos transformações, rotações, filtros e efeitos para aprimorar ainda mais suas habilidades de manipulação de imagens no HTML Canvas.