Tutorial Canvas
es un elemento HTML el cual puede ser usado para dibujar gráficos usando scripts (normalmente JavaScript). Este puede, por ejemplo, ser usado para dibujar gráficos, realizar composición de fotos o simples (y no tan simples) animaciones.
fue introducido primero por Apple para el Mac OS X Dashboard y después implementado en Safari y Google Chrome. Navegadores basados en Gecko 1.8, tal como Firefox 1.5, que también soportan este elemento. El es un elemento parte de las especificaciones de la WhatWG Web applications 1.0 mejor conocida como HTML5.
En este tutorial se describe cómo usar el elemento para dibujar gráficos en 2D, empezando con lo básico. Los ejemplos le proveerán mayor claridad a las ideas que pueda tener referentes al canvas, así como los códigos que necesita para crear su propio contenido.
Antes de Empezar
Usar el elemento no es algo muy díficil pero necesita saber y entender los aspectos básicos del HTML y JavaScript. El elemento no está soportado en navegadores viejos, pero están soportado en la mayoría de las versiones más recientes de los navegadores. El tamaño por defecto del canvas es 300px * 150px [ancho (width) * alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS. Con el fin de dibujar gráficos en el lienzo
En este Tutorial
Vea también
- Canvas topic page
- Drawing Graphics with Canvas
- Canvas examples
- HTML5 Tutorial
- Drawing Text Using a Canvas
- Adding Text to Canvas
- Canvas Demos - Games, applications, tools and tutorials
- Canvas Drawing and Animation Application
- Interactive canvas tutorial
- Canvas Cheat Sheet with all attributes and methods
- Adobe Illustrator to Canvas plug-in
- HTML5CanvasTutorials
- How to draw N grade Bézier curves with the Canvas API
- 31 days of canvas tutorials
- W3C Standard
- HTML5 Canvas tutorials and reference
- JavaScript Canvas Image Conversion