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.
