¿Qué es Canvas de HTML5?

Personalmente  siempre fui un programador de ActionScript orientado a objetos,  hasta que llegó el día: Adobe anunció la muerte de flash . A todos los que aún programan en AS3, los aliento a migrar cuanto antes sus trabajos a este nuevo objeto que pasaré a explicar, el Canvas, de HTML5.

Mediante el uso de librerías, sprites y JavaScript se puede hacer un juego igual de complejo y entretenido que cualquier juego en flash. Las posibilidades de ahora son muy competentes, y más rápidas. Cualquier juego empleando canvas y javascript es muchísimo más liviano que su homólogo con flash. Además  no necesita  plugin, este maravilloso canvas está integrado en las etiquetas del lenguaje.

Básicamente con algunas imágenes, algo de javascript, css y una etiqueta canvas, podemos lograr si no un juego, al menos algo llamativo.

Insertando el canvas

Dentro del body del documento, el objeto se declara así:

<canvas id="testCanvas" width="500" height="500">
El texto contenido dentro de la etiqueta se muestra en los navegadores que no soporten esta función.</canvas>

Luego  insertar el contenido (en este caso dibujando en JavaScript)

 


var canvas = document.getElementById("testCanvas");
var contexto = canvas.getContext('2d');
/*con este código, indicamos que queremos dibujar un rectángulo en el x=0, y=50,ancho=10, alto=150*/
contexto.fillRect(50, 0, 10, 150);

See the Pen
Html5Test1
by Germán Wasem (@germ-n-wasem)
on CodePen.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *