Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

API de CANVAS

No description
by

Ericka Castro

on 5 June 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of API de CANVAS

Referencias CANVAS en HTML5 Vamos a crear un pequeño ejemplo de unas naves en un pequeño espacio sideral.
Lo haremos paso a paso: Combinando canvas y Javascript <script>
var canvas = document.getElementById(“myCanvas");
var context = canvas.getContext("2d");
</script> Agenda Creando nuestro CANVAS Herramientas del Canvas Introducción Introducción
Etiqueta <canvas>
Elementos de un Canvas
Canvas & Javascript
Ejemplo en HTML5 CANVAS Incorporado en HTML5 para
generar gráficos y animaciones usando Javascript. Elimina el uso de complementos externos, o tecnologías externas como FLASH o FleX. Inicialmente desarrollado por Apple para MACOS X para soportar su Dashboard y para su navegador Safari. Posteriormente lo usaron otros navegadores El elemento canvas puede definirse como un API para dibujos y animaciones.
Se usa a través de la etiqueta:
<canvas>
</canvas> Para hacer uso de este API para este ejemplo definiremos un CANVAS y le debemos darle sus dimensiones. <canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas> Herramientas de dibujo

Rectangulos
Arcos
Dibujo de lineas y caminos(path)
Curvas. Figura Herramienta Arc-Canvas
Ejemplo tomado de la W3schools Herramientas de Efecto:
Para aplicar relleno y hacer trazos.
SombrasGradientes(lineales y radiales)
Transparencia(alpha)
Composición. Figura Elemento para Gradiente
Ejemplo tomado de w3Schools Transformaciones:

EscalamientoRotación
Traslación
Matriz de Transformaciones. Herramientas para obtención de datos(entrada/salida)
Cargar archivos externos como imágenes, otros canvas y datos a través de una URL.
Recuperando una representación PNG del lienzo actual como un URI de datos Figura Ejemplo de Escalamiento
Tomado de la W3schools Canvas y Javascript Bibliográficas API canvas, consultado en:https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas/Tutorial?redirectlocale=en-US&redirectslug=HTML%2FCanvas%2FTutorial Elemento canvas, consultado en: http://www.w3schools.com/html/html5_canvas.asp
Resumen del APi de Canvas, disponible en:
http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf Guía que se usó: http://msdn.microsoft.com/es-es/library/gg589516%28v=vs.85%29.aspx Figura Obtención de datos en canvas.
Tomado de Javascprit para gráficos Andrea Torres
Ericka Castro
Karen Ponce
Raquel Villón Algunos Ejemplos http://clublime.com/lab/html5/sphere/ http://alteredqualia.com/canvasmol/#Cholesterol http://www.feedtank.com/labs/html_canvas/ http://www.effectgames.com/demos/canvascycle/ http://peterned.home.xs4all.nl/demooo/ http://hakim.se/experiments/html5/trail/02/
Full transcript