Tutorial Canvas
<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.
<canvas> 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 <canvas> 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 <canvas> 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 <canvas> no es algo muy díficil pero necesita saber y entender los aspectos básicos del HTML y JavaScript. El elemento <canvas> 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 <canvas> se utiliza un objeto de contexto de JavaScript que crea gráficos sobre la marcha.
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