Desde hace tiempo se viene hablando de las nuevas tecnologías del tan amplio HTML5, y el objeto Canvas es uno de ellas.Cabe destacar que no solo es un tag, sino que se necesita un amplio soporte de javaScript, ya que esto es el gran salto del HTML.Comencemos entonces, dando la definición del Canvas según Wikipedia:
Canvas es un elemento HTML incorporado en HTML5 que permite la generación de gráficos dinámicamente por medio d el scripting. Permite generar gráficos estáticos y animaciones.
El objeto Canvas puede ser accedido a través de JavaScript, permitiendo generar gráficos 2D, juegos, animaciones y composición de imágenes.
Entonces, basicamente podemos incluir el objeto canvas en nuestro HTML así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Canvas.~</title>
</head>
<body>
<div id="canvasRoot">
<canvas id="canvasInit" width="600" height="400"></canvas>
</div>
</body>
</html>
Pero como comentaba hace instantes, el objeto Canvas, haciendo énfasis en la palabra OBJETO, necesita un soporte funcional de cara a JavaScript. Por ello debebemos incluir un archivo externo de JavaScript a nuestro HTML, o directamente podemos ponerlo ahí mismo, aunque no es muy recomendable; lo dejo en manos del lector.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Canvas</title>
<script language="javascript">
var head, child;
head = document.getElementsByTagName ( 'head' ) [ 0 ];
child = document.createElement ( 'script' );
child.src = 'canvas.js';
child.type = 'text/javascript';
child.id = 'canvasProccessor';
try {
head.appendChild ( child );
}
catch ( e ) { return; }
</script>
</head>
<body>
<div id="canvasRoot">
<canvas id="canvasInit" width="600" height="400"></canvas>
</div>
</body>
</html>
O también podríamos haber optado por integrar el archivo externo del JavaScript mediante:
<script src="path/archivo.js" type="text/javascript" id="canvasProccessor">,pero eso va sujeto a las costumbres de cada uno, siempre dependiendo desde que cuerpo teórico hemos elegido para forjar nuestro conocimiento sobre el tema en cuestión; pero eso es redundante y no me incumbe.
Entonces, el archivo externo del JavaScript debería ser algo así:
<script src="path/archivo.js" type="text/javascript" id="canvasProccessor">,pero eso va sujeto a las costumbres de cada uno, siempre dependiendo desde que cuerpo teórico hemos elegido para forjar nuestro conocimiento sobre el tema en cuestión; pero eso es redundante y no me incumbe.
Entonces, el archivo externo del JavaScript debería ser algo así:
/**
* Objeto de acceso público.~
*/
var CanvasProccessor = { };
(function () {
'use strict';
var Private = { },
_Width,
_Height,
_PosX,
_PosY,
_Source,
_Id;
CanvasProccessor.Element = [ ];
/**
* @var Options - Array.~
*/
Private.__Merge = function ( _Object )
{
if ( typeof ( _Object ) === 'object' ) {
/**
* El objeto toma los valores asignados o los toma mediante los valores
* fuertemente tipados a cotinuación.~
*/
_Width = _Object.Width || 500;
_Height = _Object.Height || 500;
_PosX = _Object.PosX || 0;
_PosY = _Object.PosY || 0;
_Source = _Object.Source;
_Id = _Object.Id || 'canvasInit';
/**
* Quitamos los nodos del Array.~
*/
if ( CanvasProccessor.Element.length >= 1 ) {
CanvasProccessor.Element.pop();
}
/**
* Añadir al Array un objeto con todos los elementos asignados.~
*/
CanvasProccessor.Element.push({
"width" : _Width,
"height" : _Height,
"pos_x" : _PosX,
"pos_y" : _PosY,
"source" : _Source,
"canvas_id" : _Id
});
return CanvasProccessor;
}
}
CanvasProccessor.__setOptions = function ( _Object, _CallBack )
{
var CanvasObject = { },
Error;
try {
if ( typeof ( window._CallBack ) !== 'function' ) {
return _CallBack ( Private.__Merge ( _Object ) );
}
return Error = 'El tercer parametro debe ser una función.~';
}
catch ( exceptions ) {
/**
* Detectar excepción en el programa y terminar la ejecución.~
*/
Error =
exceptions.name == 'TypeError'
? 'El tercer parámetro no es del tipo esperado.~'
: 'El parámetro introducido tiene un valor indefinido~';
return Error;
}
}
CanvasProccessor.Draw = function ()
{
var _Canvas = document.getElementById( _Id ),
_Context = _Canvas.getContext ( '2d' ),
_Image = new Image ();
_Image.src = _Source;
/**
* Retorna la imágen, y la inserta en el elemento Canvas.~
*/
return _Context.drawImage ( _Image, _PosX, _PosY, _Width, _Height );
}
}) ();
Este ejemplo se ve algo complejo ya que utilizamos la respectiva orientación a objetos de JavaScript y usamos funciones como parámetro de otras funciones para devolverlas como callBacks.
Pero lo más importante de este script es CanvasProccessor.Draw(), ya que contiene las propiedades de canvas.
Entonces, para usar este script, integremos un poco de JavaScript a nuestro código HTML y rellenemos con un poco de color esta entrada:
Pero lo más importante de este script es CanvasProccessor.Draw(), ya que contiene las propiedades de canvas.
Entonces, para usar este script, integremos un poco de JavaScript a nuestro código HTML y rellenemos con un poco de color esta entrada:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Canvas</title>
<script language="javascript">
var head, child;
head = document.getElementsByTagName ( 'head' ) [ 0 ];
child = document.createElement ( 'script' );
child.src = 'canvas.js';
child.type = 'text/javascript';
child.id = 'canvasProccessor';
try {
head.appendChild ( child );
}
catch ( e ) { return; }
</script>
</head>
<body>
<div id="canvasRoot">
<canvas id="canvasInit" width="600" height="400"></canvas>
</div>
<script language="javascript">
window.onload = function () {
if ( canvasProccessor ) {
CanvasProccessor.__setOptions ({
"Width" : 512,
"Height" : 512,
"Source" : "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png",
"Id" : null
},
function ( response ) {
console.log ( response );
return CanvasProccessor.Draw();
});
}
};
</script>
</body>
</html>
Entonces aquí seteamos nuestros elementos y luego utilizamos la función Draw() del objeto CanvasProccessor para dibujar la imágen.
Finalmente hemos repasado lo que el objeto Canvas representa, aunque cabe destacar que aún es mucho más complejo que este sencillo ejemplo.
Aquí dejo algun material de referencia para aprender más sobre este objeto:
Finalmente hemos repasado lo que el objeto Canvas representa, aunque cabe destacar que aún es mucho más complejo que este sencillo ejemplo.
Aquí dejo algun material de referencia para aprender más sobre este objeto:
Nota: este material de referencia está escrito en inglés, y puede traducirse al español y otros tantos idiomas. Recomiendo explícitamente que sea leído en inglés, ya que casi todos los lenguajes computacionales o por lo menos los más populares, al salir o al desarrollar su complejidad en Estados Unidos (la mayoría), tienen su respectiva documentación oficial y libros de gurús del mismo lenguaje escritos en inglés.
Canvas tutorial - MDN.~
Drawing Graphics With Canvas - MDN.~
HTML, Canvas - MDN.~
Canvas tutorial - MDN.~
Drawing Graphics With Canvas - MDN.~
HTML, Canvas - MDN.~
Esta ha sido una pequeña introducción a un objeto del reciente HTML5.
No intenten dar soporte a los navegadores viejos a no ser de que esten desarrollando una gran aplicación comercial o sea de suma importancia hacerlo, ya que al hacerlo, jamas ayudarían al avance de estas tecnologías; por ello recomiendo pensarlo dos veces, además esto dará grandes dolores de cabeza y una enorme frustración.
Saludos.~
No intenten dar soporte a los navegadores viejos a no ser de que esten desarrollando una gran aplicación comercial o sea de suma importancia hacerlo, ya que al hacerlo, jamas ayudarían al avance de estas tecnologías; por ello recomiendo pensarlo dos veces, además esto dará grandes dolores de cabeza y una enorme frustración.
Saludos.~
Entradas
