Saltar al contenido
wandres.dev
Iniciar sesión

Canvas y SVG

Los dos modelos del gráfico 2D: el contexto de canvas, píxeles y composición, SVG a fondo, filtros, y la visualización de datos.

32 unidades · 160 temasEmpezar la ruta
  1. 00

    Nivel 0

    5 temas
    1. 01Tres modelos de gráfico: canvas, SVG y CSShechoen curso
    2. 02Qué resuelve cada modelo en la prácticahechoen curso
    3. 03Dónde vive cada modelo en el pipeline del navegadorhechoen curso
    4. 04Los vecinos del mapa: WebGL, WebGPU y la Paint APIhechoen curso
    5. 05El mapa mental completo y cómo recorrerlohechoen curso
  2. 01

    Nivel 1

    5 temas
    1. 01Qué es de verdad una imagen rasterhechoen curso
    2. 02Qué es de verdad una imagen vectorialhechoen curso
    3. 03Escalado: qué pasa exactamente cuando amplíashechoen curso
    4. 04Memoria y peso: dónde se cruzan las curvashechoen curso
    5. 05Accesibilidad, impresión y edición posteriorhechoen curso
  3. 02

    Nivel 2

    5 temas
    1. 01El elemento canvas y getContexthechoen curso
    2. 02Las opciones del contexto: alpha, willReadFrequently y desynchronizedhechoen curso
    3. 03El sistema de coordenadas: origen, ejes y el medio píxelhechoen curso
    4. 04El modo inmediato: el canvas no recuerda nadahechoen curso
    5. 05Un primer dibujo completo: rectángulos y limpiezahechoen curso
  4. 03

    Nivel 3

    5 temas
    1. 01Los dos tamaños del canvas y por qué se ve borrosohechoen curso
    2. 02devicePixelRatio: densidad, zoom y sus cambioshechoen curso
    3. 03El patrón correcto de redimensionadohechoen curso
    4. 04ResizeObserver y devicePixelContentBoxSizehechoen curso
    5. 05Límites de tamaño, memoria y el canvas que se queda en blancohechoen curso
  5. 04

    Nivel 4

    5 temas
    1. 01El modelo de path: la ruta actual y sus subrutashechoen curso
    2. 02Arcos: arc, arcTo y el modelo de las tangenteshechoen curso
    3. 03Curvas de Bézier: cuadráticas, cúbicas y la continuidadhechoen curso
    4. 04rect, roundRect y ellipse: las primitivas con nombrehechoen curso
    5. 05Por qué el orden importa: acumulación, pintado y estadohechoen curso
  6. 05

    Nivel 5

    5 temas
    1. 01lineWidth y el problema del medio píxelhechoen curso
    2. 02lineCap, lineJoin y miterLimithechoen curso
    3. 03Líneas discontinuas: setLineDash y lineDashOffsethechoen curso
    4. 04fillStyle: colores, gradientes y patroneshechoen curso
    5. 05La regla de relleno: nonzero frente a evenoddhechoen curso
  7. 06

    Nivel 6

    5 temas
    1. 01translate, rotate y scale: el orden lo es todohechoen curso
    2. 02La matriz del contexto: transform, setTransform y getTransformhechoen curso
    3. 03La pila de estado: save, restore y lo que de verdad guardanhechoen curso
    4. 04Pensar en espacios locales, no en coordenadas absolutashechoen curso
    5. 05Invertir la transformación: de la pantalla al mundohechoen curso
  8. 07

    Nivel 7

    5 temas
    1. 01fillText y strokeText: dibujar texto y sus límiteshechoen curso
    2. 02La propiedad font y los ajustes tipográficos del contextohechoen curso
    3. 03textAlign y textBaseline: qué significa cada líneahechoen curso
    4. 04measureText y todas sus métricashechoen curso
    5. 05Texto multilínea: el ajuste de línea que hay que escribirhechoen curso
  9. 08

    Nivel 8

    5 temas
    1. 01Las tres firmas de drawImagehechoen curso
    2. 02Recorte y sprite sheetshechoen curso
    3. 03createImageBitmap y sus opcioneshechoen curso
    4. 04Decodificar fuera del hilo principalhechoen curso
    5. 05imageSmoothing: cuándo suavizar y cuándo nohechoen curso
  10. 09

    Nivel 9

    5 temas
    1. 01getImageData y putImageData: el acceso directohechoen curso
    2. 02La disposición del array de píxeleshechoen curso
    3. 03Filtros a mano: escala de grises, umbral y curvashechoen curso
    4. 04Convolución: filtros que miran a los vecinoshechoen curso
    5. 05El coste real de leer del canvashechoen curso
  11. 10

    Nivel 10

    5 temas
    1. 01El modelo de composición: origen, destino y globalAlphahechoen curso
    2. 02Los operadores de Porter-Duffhechoen curso
    3. 03Los modos de fusiónhechoen curso
    4. 04clip: el recorte y su interacción con la pilahechoen curso
    5. 05Los efectos que la composición desbloqueahechoen curso
  12. 11

    Nivel 11

    5 temas
    1. 01Path2D: la ruta como objeto reutilizablehechoen curso
    2. 02Path2D desde una cadena de datos SVGhechoen curso
    3. 03OffscreenCanvas: dibujar sin elementohechoen curso
    4. 04transferControlToOffscreen y el dibujo en un workerhechoen curso
    5. 05Lo que se gana y lo que se complica al salir del hilo principalhechoen curso
  13. 12

    Nivel 12

    5 temas
    1. 01El problema del hit testing: un elemento y ningún objetivohechoen curso
    2. 02isPointInPath e isPointInStroke: la consulta exactahechoen curso
    3. 03El canvas de color oculto y su precisión realhechoen curso
    4. 04El modelo de escena y los eventos que hay que inventarsehechoen curso
    5. 05La accesibilidad del canvas: el contenido de reserva y sus límiteshechoen curso
  14. 13

    Nivel 13

    5 temas
    1. 01update y draw: por qué son dos funciones y no unahechoen curso
    2. 02El delta time: animar en segundos, no en fotogramashechoen curso
    3. 03Borrado completo frente a borrado parcial: las estelashechoen curso
    4. 04Interpolación entre estados: del salto al movimientohechoen curso
    5. 05El bucle con pausa y reanudaciónhechoen curso
  15. 14

    Nivel 14

    5 temas
    1. 01Lo que de verdad cuesta: los cambios de estadohechoen curso
    2. 02Gradientes y objetos creados dentro del buclehechoen curso
    3. 03El canvas de caché para lo que se repitehechoen curso
    4. 04La región sucia: redibujar solo lo que ha cambiadohechoen curso
    5. 05Cuándo el canvas deja de ser la herramienta adecuadahechoen curso
  16. 15

    Nivel 15

    5 temas
    1. 01SVG es XML en el DOM, no un formato de imagenhechoen curso
    2. 02El viewBox y qué hace exactamentehechoen curso
    3. 03preserveAspectRatio con su sintaxis completahechoen curso
    4. 04El sistema de coordenadas de usuario y las unidadeshechoen curso
    5. 05img, object o en línea: qué permite cada forma de incluir un SVGhechoen curso
  17. 16

    Nivel 16

    5 temas
    1. 01rect: el rectángulo y sus radioshechoen curso
    2. 02circle y ellipse: el radio y sus trampashechoen curso
    3. 03line, polyline y polygon: los vérticeshechoen curso
    4. 04Cuándo usar una forma y cuándo bajar a pathhechoen curso
    5. 05Orden de pintado y caja envolventehechoen curso
  18. 17

    Nivel 17

    5 temas
    1. 01Anatomía del atributo dhechoen curso
    2. 02Los comandos rectos: M, L, H, V y Zhechoen curso
    3. 03Curvas: C, S, Q y Thechoen curso
    4. 04El arco elíptico: A y sus dos banderashechoen curso
    5. 05Leer una d a ojohechoen curso
  19. 18

    Nivel 18

    5 temas
    1. 01Atributos de presentación frente a CSShechoen curso
    2. 02Qué propiedades SVG viven en CSShechoen curso
    3. 03La herencia de las propiedades de pinturahechoen curso
    4. 04currentColor y el icono que se adaptahechoen curso
    5. 05Custom properties dentro de SVGhechoen curso
  20. 19

    Nivel 19

    5 temas
    1. 01defs y el contenido que no se pintahechoen curso
    2. 02use y su árbol de sombrahechoen curso
    3. 03symbol y su propio viewBoxhechoen curso
    4. 04El sprite SVG en líneahechoen curso
    5. 05Sprite externo frente a sprite en líneahechoen curso
  21. 20

    Nivel 20

    5 temas
    1. 01linearGradient y las paradas de colorhechoen curso
    2. 02gradientUnits: los dos sistemas de coordenadashechoen curso
    3. 03radialGradient y spreadMethodhechoen curso
    4. 04pattern y las texturashechoen curso
    5. 05Las referencias por id y el ámbito globalhechoen curso
  22. 21

    Nivel 21

    5 temas
    1. 01clipPath: el recorte binariohechoen curso
    2. 02mask: alfa y luminanciahechoen curso
    3. 03Las unidades de recorte y máscarahechoen curso
    4. 04Recortar y enmascarar desde CSShechoen curso
    5. 05Elegir entre recorte y máscarahechoen curso
  23. 22

    Nivel 22

    5 temas
    1. 01El pipeline de primitivas: in y resulthechoen curso
    2. 02La región del filtro y el espacio de colorhechoen curso
    3. 03Desenfoque, sombra y brillo: efectos completoshechoen curso
    4. 04feColorMatrix y la manipulación del colorhechoen curso
    5. 05feTurbulence, feDisplacementMap y feMorphologyhechoen curso
  24. 23

    Nivel 23

    5 temas
    1. 01text y su posicionamientohechoen curso
    2. 02tspan, dx, dy y el texto multilíneahechoen curso
    3. 03textPath: texto sobre una rutahechoen curso
    4. 04textLength y lengthAdjusthechoen curso
    5. 05Las fuentes en un SVG exportadohechoen curso
  25. 24

    Nivel 24

    5 temas
    1. 01title, desc y aria-labelledbyhechoen curso
    2. 02El rol img y cuándo aplicarlohechoen curso
    3. 03Cuándo un SVG es decorativohechoen curso
    4. 04El patrón correcto para iconoshechoen curso
    5. 05Una gráfica de datos accesiblehechoen curso
  26. 25

    Nivel 25

    5 temas
    1. 01Qué produce Figma e Illustratorhechoen curso
    2. 02SVGO y los plugins que rompen cosashechoen curso
    3. 03Precisión decimal y el peso realhechoen curso
    4. 04El flujo de exportación limpiohechoen curso
    5. 05SVG en línea frente a externo: el criterio de cachéhechoen curso
  27. 26

    Nivel 26

    5 temas
    1. 01createElementNS y el espacio de nombreshechoen curso
    2. 02Generar rutas a partir de datoshechoen curso
    3. 03El patrón de componente de gráficohechoen curso
    4. 04Serializar, descargar y convertir a PNGhechoen curso
    5. 05Actualizar en vez de recrearhechoen curso
  28. 27

    Nivel 27

    5 temas
    1. 01Qué es una escalahechoen curso
    2. 02Escalas lineal, logarítmica y de potenciahechoen curso
    3. 03Escalas de tiempo, ordinal y de bandahechoen curso
    4. 04Construir un eje a manohechoen curso
    5. 05El algoritmo de las marcas bonitashechoen curso
  29. 28

    Nivel 28

    5 temas
    1. 01La filosofía modular de D3hechoen curso
    2. 02El join de datos: enter, update y exithechoen curso
    3. 03Los generadores de formahechoen curso
    4. 04Las disposiciones: jerarquías y fuerzashechoen curso
    5. 05Usar D3 solo para la matemáticahechoen curso
  30. 29

    Nivel 29

    5 temas
    1. 01Qué gráfico responde a qué preguntahechoen curso
    2. 02La jerarquía de precisión perceptualhechoen curso
    3. 03Los errores clásicoshechoen curso
    4. 04El color en visualizaciónhechoen curso
    5. 05Anotación, etiquetado directo y títulohechoen curso
  31. 30

    Nivel 30

    5 temas
    1. 01El umbral de elementos y de dónde salehechoen curso
    2. 02La interacción: lo que SVG regala y el lienzo te cobrahechoen curso
    3. 03Accesibilidad, impresión y zoomhechoen curso
    4. 04Exportación y render en servidorhechoen curso
    5. 05El enfoque híbrido y el árbol de decisiónhechoen curso
  32. 31

    Nivel 31

    5 temas
    1. 01La arquitectura de un sistema de visualizaciónhechoen curso
    2. 02El mapa de decisiones del trackhechoen curso
    3. 03Los errores que ya no deberías cometerhechoen curso
    4. 04El gráfico que aguanta producciónhechoen curso
    5. 05Hacia dónde va el gráfico 2D en la webhechoen curso