Linhas e Caminhos
Vamos explorar o fascinante mundo das linhas e caminhos no HTML Canvas. Imagine o Canvas como seu papel digital, pronto para receber seus traços.
Para começar, desenhar uma linha é surpreendentemente simples. Use o seguinte código JavaScript para criar uma linha básica:
contexto.beginPath(); contexto.moveTo(50, 50); contexto.lineTo(200, 50); contexto.stroke();
Aqui, beginPath() indica o início do caminho, moveTo(x, y) define o ponto inicial, lineTo(x, y) traça a linha até o ponto especificado, e stroke() finaliza o desenho.
Agora, imagine criar um caminho mais complexo. Pense em um caminho como uma série de segmentos de linha conectados. Vamos adicionar um exemplo:
contexto.beginPath(); contexto.moveTo(50, 50); contexto.lineTo(200, 50); contexto.lineTo(150, 150); contexto.lineTo(100, 100); contexto.closePath(); contexto.stroke();
Aqui, além das linhas, usamos closePath() para conectar o último ponto ao primeiro, criando um polígono.
Pois bem, pratique esses conceitos para ganhar confiança. Para ajudar ainda mais vou criar um exemplo mais completo.
Vejo o exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linhas e Caminhos 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");
// Desenhando uma linha simples
contexto.beginPath();
contexto.moveTo(50, 50);
contexto.lineTo(200, 50);
contexto.stroke();
// Desenhando um polígono
contexto.beginPath();
contexto.moveTo(50, 50);
contexto.lineTo(200, 50);
contexto.lineTo(150, 150);
contexto.lineTo(100, 100);
contexto.closePath();
contexto.stroke();
</script>
</body>
</html>
Visualização do código
Nos próximos tópicos, vamos explorar mais primitivas. Continue praticando!
