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!