SlideShare una empresa de Scribd logo
1 de 3
Descargar para leer sin conexión
Introducción a la informática UTP
Juan José Granada Taborda Ing. Sistemas y Computación
Canvas
Canvas
Juan José Granada Taborda
Universidad tecnológica de Pereira
Jgt441@gmail.com
¿Qué es Canvas?
Canvas (lienzo) es un elemento HTML que permite la
creación de gráficos y animaciones de forma dinámica
por medio de scripts. Sus aplicaciones son
practicamente iniminaginables: crear juegos, interfaces,
editores gráficos o efectos dinámicos, aplicaciones
3D…. Sólo la imaginación pone límites a Canvas. En
este artículo, profundizamos en las posibilidades de
Canvas y las ejemplificamos con un sencillo gráfico.
A modo anecdótico, sólo señalar Canvas fue creado por
Apple, pero han liberado la propiedad intelectual para
englobarlo dentro de los estándares de HTML. Para el
usuario, todo son ventajas. No requiere ningún plugin
adicional, sólo una un navegador que soporte HTML5 y
hoy en día todos los navegadores importantes (Safari,
Chrome, Firefox, Opera e Internet Explorer) soportan
Canvas, desde hace ya unas cuantas versiones.
Algunos ejemplos de canvas:
1. (ejemplo tratado en clase)
Este código muestra:
Scientia et Technica Año XVIII, No xx, Mesxx de Añoxx. Universidad Tecnológica de Pereira.2
2.
Este código muestra:
3.
Este código muestra:
Introducción a la informática UTP
____________________________
3
4.
este código muestra:

Más contenido relacionado

Similar a Canvas

softwere de diseño grafico
softwere de diseño graficosoftwere de diseño grafico
softwere de diseño graficoXmxuri Shimuzu
 
GUÍA EDUCATIVA DE HERRAMIENTAS, UTILIDADES, ENLACES Y SITIOS WEB DE LA A-M
GUÍA EDUCATIVA DE HERRAMIENTAS, UTILIDADES, ENLACES Y SITIOS WEB DE LA A-MGUÍA EDUCATIVA DE HERRAMIENTAS, UTILIDADES, ENLACES Y SITIOS WEB DE LA A-M
GUÍA EDUCATIVA DE HERRAMIENTAS, UTILIDADES, ENLACES Y SITIOS WEB DE LA A-Mjorge camargo
 
Adobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea MorenoAdobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea Morenorestauracio
 
Adobe illustrator vs inkscape
Adobe illustrator vs inkscapeAdobe illustrator vs inkscape
Adobe illustrator vs inkscaperestauracio
 
Programa animacion digital I 2012-2
Programa animacion digital I 2012-2Programa animacion digital I 2012-2
Programa animacion digital I 2012-2Carlos Cardoso
 
como se usa el diseño grafico
como se usa el diseño grafico como se usa el diseño grafico
como se usa el diseño grafico Jordan Smith Gb
 
que es diseño grafico etc
que es diseño grafico etcque es diseño grafico etc
que es diseño grafico etcJordan Smith Gb
 
Presentacion Diseño Web
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño WebNicida Malca
 
Animación vectorial 2D con Software Libre
Animación vectorial 2D con Software LibreAnimación vectorial 2D con Software Libre
Animación vectorial 2D con Software LibreLeonardo J. Caballero G.
 
Presentación adobe illustrator
Presentación adobe illustratorPresentación adobe illustrator
Presentación adobe illustratorvictorhpi
 
e1_t1_ Hermoso de Mendoza
e1_t1_ Hermoso de Mendozae1_t1_ Hermoso de Mendoza
e1_t1_ Hermoso de Mendozavictorhpi
 

Similar a Canvas (20)

Software manipulación de imágenes
Software manipulación de imágenesSoftware manipulación de imágenes
Software manipulación de imágenes
 
Tareajimmy
TareajimmyTareajimmy
Tareajimmy
 
softwere de diseño grafico
softwere de diseño graficosoftwere de diseño grafico
softwere de diseño grafico
 
GUÍA EDUCATIVA DE HERRAMIENTAS, UTILIDADES, ENLACES Y SITIOS WEB DE LA A-M
GUÍA EDUCATIVA DE HERRAMIENTAS, UTILIDADES, ENLACES Y SITIOS WEB DE LA A-MGUÍA EDUCATIVA DE HERRAMIENTAS, UTILIDADES, ENLACES Y SITIOS WEB DE LA A-M
GUÍA EDUCATIVA DE HERRAMIENTAS, UTILIDADES, ENLACES Y SITIOS WEB DE LA A-M
 
Adobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea MorenoAdobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea Moreno
 
Adobe illustrator vs inkscape
Adobe illustrator vs inkscapeAdobe illustrator vs inkscape
Adobe illustrator vs inkscape
 
UNIDAD I.pptx
UNIDAD I.pptxUNIDAD I.pptx
UNIDAD I.pptx
 
Xavier patricio
Xavier patricioXavier patricio
Xavier patricio
 
Programa animacion digital I 2012-2
Programa animacion digital I 2012-2Programa animacion digital I 2012-2
Programa animacion digital I 2012-2
 
como se usa el diseño grafico
como se usa el diseño grafico como se usa el diseño grafico
como se usa el diseño grafico
 
que es diseño grafico etc
que es diseño grafico etcque es diseño grafico etc
que es diseño grafico etc
 
Adobe Flash, entre el amor y el odio
Adobe Flash, entre el amor y el odioAdobe Flash, entre el amor y el odio
Adobe Flash, entre el amor y el odio
 
Flash.
Flash.Flash.
Flash.
 
Flash
FlashFlash
Flash
 
Presentacion Diseño Web
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño Web
 
Animación vectorial 2D con Software Libre
Animación vectorial 2D con Software LibreAnimación vectorial 2D con Software Libre
Animación vectorial 2D con Software Libre
 
Presentación adobe illustrator
Presentación adobe illustratorPresentación adobe illustrator
Presentación adobe illustrator
 
e1_t1_ Hermoso de Mendoza
e1_t1_ Hermoso de Mendozae1_t1_ Hermoso de Mendoza
e1_t1_ Hermoso de Mendoza
 
Tareajimmy
TareajimmyTareajimmy
Tareajimmy
 
Tarea
TareaTarea
Tarea
 

Más de juan jose

Recursividad
RecursividadRecursividad
Recursividadjuan jose
 
Recursividad
RecursividadRecursividad
Recursividadjuan jose
 
Javascript100
Javascript100Javascript100
Javascript100juan jose
 
Java script ejemplos
Java script ejemplosJava script ejemplos
Java script ejemplosjuan jose
 
Ejemplos html
Ejemplos htmlEjemplos html
Ejemplos htmljuan jose
 
Htlm y javascrip
Htlm y javascripHtlm y javascrip
Htlm y javascripjuan jose
 
Htlm y javascrip
Htlm y javascripHtlm y javascrip
Htlm y javascripjuan jose
 

Más de juan jose (8)

Recursividad
RecursividadRecursividad
Recursividad
 
Recursividad
RecursividadRecursividad
Recursividad
 
Javascript100
Javascript100Javascript100
Javascript100
 
Conjuntos
ConjuntosConjuntos
Conjuntos
 
Java script ejemplos
Java script ejemplosJava script ejemplos
Java script ejemplos
 
Ejemplos html
Ejemplos htmlEjemplos html
Ejemplos html
 
Htlm y javascrip
Htlm y javascripHtlm y javascrip
Htlm y javascrip
 
Htlm y javascrip
Htlm y javascripHtlm y javascrip
Htlm y javascrip
 

Último

5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONALMiNeyi1
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptxRigoTito
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOluismii249
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptAlberto Rubio
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxlupitavic
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesYanirisBarcelDelaHoz
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSYadi Campos
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOluismii249
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIAFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIIsauraImbrondone
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfMercedes Gonzalez
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Juan Martín Martín
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Alejandrino Halire Ccahuana
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 

Último (20)

5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonables
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIAFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 

Canvas

  • 1. Introducción a la informática UTP Juan José Granada Taborda Ing. Sistemas y Computación Canvas Canvas Juan José Granada Taborda Universidad tecnológica de Pereira Jgt441@gmail.com ¿Qué es Canvas? Canvas (lienzo) es un elemento HTML que permite la creación de gráficos y animaciones de forma dinámica por medio de scripts. Sus aplicaciones son practicamente iniminaginables: crear juegos, interfaces, editores gráficos o efectos dinámicos, aplicaciones 3D…. Sólo la imaginación pone límites a Canvas. En este artículo, profundizamos en las posibilidades de Canvas y las ejemplificamos con un sencillo gráfico. A modo anecdótico, sólo señalar Canvas fue creado por Apple, pero han liberado la propiedad intelectual para englobarlo dentro de los estándares de HTML. Para el usuario, todo son ventajas. No requiere ningún plugin adicional, sólo una un navegador que soporte HTML5 y hoy en día todos los navegadores importantes (Safari, Chrome, Firefox, Opera e Internet Explorer) soportan Canvas, desde hace ya unas cuantas versiones. Algunos ejemplos de canvas: 1. (ejemplo tratado en clase) Este código muestra:
  • 2. Scientia et Technica Año XVIII, No xx, Mesxx de Añoxx. Universidad Tecnológica de Pereira.2 2. Este código muestra: 3. Este código muestra:
  • 3. Introducción a la informática UTP ____________________________ 3 4. este código muestra: