Desenhando retângulos e caminhos
Use fillRect, strokeRect e comandos de caminho para desenhar formas.
Desenhando retângulos e caminhos é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Configuração da tela
O elemento <canvas> requer atributos explícitos de largura e altura para definir as dimensões em pixels. Obtenha o contexto 2D: const ctx = canvas.getContext("2d"). Todas as operações de desenho usam esse objeto de contexto.
<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");fillRect e strokeRect
Desenhe retângulos sem caminhos: ctx.fillRect(x, y, width, height) preenche um retângulo sólido. ctx.strokeRect(x, y, width, height) desenha o contorno. Defina ctx.fillStyle e ctx.strokeStyle antes de desenhar.
ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);clearRect para apagar
ctx.clearRect(x, y, width, height) limpa os pixels, tornando-os transparentes. Use-o para apagar áreas antes de desenhar novamente — isso é essencial para animações: limpe a tela e depois redesenhe tudo em novas posições a cada quadro.
Fundamentos dos caminhos
Os caminhos definem formas. Comece com: ctx.beginPath(). Vá para o ponto inicial: ctx.moveTo(x, y). Desenhe linhas: ctx.lineTo(x, y). Feche com: ctx.closePath(). Renderize com: ctx.fill() ou ctx.stroke().
Desenhando linhas
Um triângulo: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke(). closePath desenha automaticamente o segmento final de volta ao ponto inicial — não é necessário repetir a primeira coordenada.
Arco e círculo
ctx.arc(cx, cy, radius, startAngle, endAngle). Um círculo completo: ctx.arc(100, 100, 50, 0, Math.PI * 2). Os ângulos são expressos em radianos. 0 corresponde à direita (posição das 3 horas); Math.PI corresponde à esquerda (posição das 9 horas).
Curvas de Bezier
ctx.quadraticCurveTo(cpx, cpy, x, y) desenha uma curva de Bezier quadrática com um ponto de controle. ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) desenha uma curva de Bezier cúbica com dois pontos de controle para criar curvas suaves.
Estilos de preenchimento
fillStyle aceita textos de cores, gradientes lineares (ctx.createLinearGradient()), gradientes radiais (ctx.createRadialGradient()) e padrões (ctx.createPattern(image, repeat)). Aplique preenchimentos complexos além das cores sólidas para obter efeitos visuais ricos.
Estilos de linha
Controle a aparência das linhas: ctx.lineWidth (largura em pixels), ctx.lineCap ("butt", "round", "square"), ctx.lineJoin ("miter", "round", "bevel") e ctx.setLineDash([5, 3]) para linhas tracejadas com comprimentos alternados.
Salvar e restaurar
ctx.save() coloca o estado atual (fillStyle, strokeStyle, lineWidth, transform, clip) em uma pilha. ctx.restore() o remove da pilha. Envolva operações de desenho complexas com save/restore para evitar que estilos vazem entre operações de desenho não relacionadas.
Sistema de coordenadas
A origem da tela (0,0) é o canto superior esquerdo. X aumenta para a direita; Y aumenta para baixo. As transformações (translate, rotate, scale) alteram o sistema de coordenadas, permitindo desenhar em relação a uma origem local sem calcular manualmente as posições absolutas.
Verificação de conhecimento
O que ctx.beginPath() faz antes de desenhar um caminho?
Resumo
O desenho 2D na tela usa métodos de contexto para retângulos (fillRect, strokeRect), caminhos (beginPath, moveTo, lineTo, arc, bezierCurveTo), estilos (fillStyle, strokeStyle, lineWidth) e gerenciamento de estado (save/restore). Dominar essas primitivas permite criar gráficos complexos a partir de blocos de construção simples.
Perguntas Frequentes
A aula “Desenhando retângulos e caminhos” é grátis?
Sim — o texto completo de “Desenhando retângulos e caminhos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Desenhando retângulos e caminhos”?
Use fillRect, strokeRect e comandos de caminho para desenhar formas. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Desenhando retângulos e caminhos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configurando o Canvas e o contexto 2D
- Desenhando retângulos e caminhos
- Texto e imagens no Canvas
- Animação com requestAnimationFrame