Dibujar rectángulos y trazados
Use fillRect, strokeRect y comandos de trazado para dibujar formas
Dibujar rectángulos y trazados es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Configuración del canvas
El elemento <canvas> requiere atributos explícitos de ancho y alto para definir sus dimensiones en píxeles. Obtenga el contexto 2D: const ctx = canvas.getContext("2d"). Todas las operaciones de dibujo utilizan este objeto de contexto.
<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");fillRect y strokeRect
Dibuje rectángulos sin trazados: ctx.fillRect(x, y, width, height) rellena un rectángulo sólido. ctx.strokeRect(x, y, width, height) dibuja el contorno. Establezca ctx.fillStyle y ctx.strokeStyle antes de dibujar.
ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);clearRect para borrar
ctx.clearRect(x, y, width, height) borra los píxeles y los vuelve transparentes. Úselo para borrar áreas antes de volver a dibujar; es esencial para las animaciones: borre el canvas y, después, vuelva a dibujar todo en las nuevas posiciones en cada fotograma.
Conceptos básicos de los trazados
Los trazados definen formas. Comience con: ctx.beginPath(). Muévase al inicio: ctx.moveTo(x, y). Dibuje líneas: ctx.lineTo(x, y). Cierre: ctx.closePath(). Renderice: ctx.fill() o ctx.stroke().
Dibujar líneas
Un triángulo: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke(). closePath dibuja automáticamente el segmento final hasta el punto inicial; no es necesario repetir la primera coordenada.
Arco y círculo
ctx.arc(cx, cy, radius, startAngle, endAngle). Un círculo completo: ctx.arc(100, 100, 50, 0, Math.PI * 2). Los ángulos se expresan en radianes. 0 corresponde a la derecha (posición de las 3 en punto); Math.PI, a la izquierda (posición de las 9 en punto).
Curvas de Bezier
ctx.quadraticCurveTo(cpx, cpy, x, y) dibuja una curva de Bezier cuadrática con un punto de control. ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) dibuja una curva de Bezier cúbica con dos puntos de control para crear curvas suaves.
Estilos de relleno
fillStyle acepta cadenas de color, degradados lineales (ctx.createLinearGradient()), degradados radiales (ctx.createRadialGradient()) y patrones (ctx.createPattern(image, repeat)). Aplique rellenos complejos además de colores sólidos para crear efectos visuales enriquecidos.
Estilos de línea
Controle el aspecto de las líneas: ctx.lineWidth (ancho en píxeles), ctx.lineCap ("butt", "round", "square"), ctx.lineJoin ("miter", "round", "bevel") y ctx.setLineDash([5, 3]) para crear líneas discontinuas con longitudes alternas.
Guardar y restaurar
ctx.save() guarda el estado actual (fillStyle, strokeStyle, lineWidth, transform, clip) en una pila. ctx.restore() lo extrae de ella. Encapsule las operaciones de dibujo complejas entre save/restore para evitar que los estilos se filtren entre operaciones de dibujo no relacionadas.
Sistema de coordenadas
El origen del canvas (0,0) está en la esquina superior izquierda. X aumenta hacia la derecha; Y aumenta hacia abajo. Las transformaciones (translate, rotate, scale) cambian el sistema de coordenadas y permiten dibujar con respecto a un origen local sin calcular manualmente las posiciones absolutas.
Comprobación de conocimientos
¿Qué hace ctx.beginPath() antes de dibujar un trazado?
Resumen
El dibujo 2D en canvas utiliza métodos del contexto para rectángulos (fillRect, strokeRect), trazados (beginPath, moveTo, lineTo, arc, bezierCurveTo), estilos (fillStyle, strokeStyle, lineWidth) y gestión del estado (save/restore). Dominar estas primitivas permite crear gráficos complejos a partir de bloques de construcción sencillos.
Preguntas frecuentes
¿La lección «Dibujar rectángulos y trazados» es gratis?
Sí — el texto completo de «Dibujar rectángulos y trazados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Dibujar rectángulos y trazados»?
Use fillRect, strokeRect y comandos de trazado para dibujar formas Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Dibujar rectángulos y trazados»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configurar canvas y el contexto 2D
- Dibujar rectángulos y trazados
- Texto e imágenes en canvas
- Animación con requestAnimationFrame