Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Api Canvas HTML y JavaScript. Ejemplos. Dibujar Círculos, Formas, Gráficos, Animaciones, Juegos
Api Canvas HTML y JavaScript. Ejemplos. Dibujar Círculos, Formas, Gráficos, Animaciones, Juegos
Dibujar crculos,
formas, grficos, animaciones, juegos... (CU01195E)
Escrito por Csar Krall
Resumen:Entrega n95:Orientacin sobre el curso"Tutorial bsico del programador web: JavaScript desde cero".
Codificacin aprenderaprogramar.com:CU01195E
Dentro del desarrollo del estndar de HTML se ha incluido una nueva etiqueta o elemento HTML: <canvas>. Esta etiqueta
funciona igual que cualquier otra en el sentido de que se abre como <canvas> y se cierra como </canvas>.
El elemento canvas es un lienzo encima del cual se pueden dibujar grficos y animaciones. Permite generar grficos en
pantalla, crear animaciones, manipular imgenes e incluso video, etc. En este sentido, permite generar las animaciones
grficas necesarias utilizando HTML+JavaScript+CSS, de modo que todos los desarrollos web puedan completarse con lo
que se denominan lenguajes web sin necesidad de recurrir a tecnologas de terceras partes como Flash o los applets de
Java.
La incorporacin de toda esta potencia grfica corre a cargo de los navegadores. Dada la complejidad que conlleva, todo lo
relacionado con canvas se dice que constituye una API (interfaz de programacin de aplicaciones). Algunos navegadores
antiguos no admiten los elementos <canvas>, pero todos los navegadores modernos s lo hacen.
El elemento canvas constituye un soporte al que se le da uso a travs de JavaScript.
Nosotros en este curso no vamos a estudiar la api Canvas. Simplemente nos limitaremos a citar algunas de las posibilidades
que el uso de este elemento junto a JavaScript permite para los desarrollos web. La creacin de elementos grficos
avanzados y animaciones avanzadas constituye un rea de especializacin dentro de los desarrollos web, por tanto no lo
consideramos un conocimiento bsico. No obstante, es adecuado tener una idea de qu se puede hacer con canvas y
JavaScript.
UTILIZANDO CANVAS
Un elemento HTML canvas tiene propiedades y mtodos que podemos usar a travs de JavaScript, de la misma forma que
usamos propiedades y mtodos sobre el resto de elementos HTML como <img>, <input>, <label>, etc.
No vamos a detenernos a estudiar el API Canvas, pero queremos mostrar brevemente algunos ejemplos que nos den una
idea de qu es y para qu sirve. Escribe este cdigo en en editor de textos y gurdalo con un nombre de archivo como
ejemplo1.html:
<!DOCTYPE html>
<html>
<head><title>Ejemplo canvas aprenderaprogramar.com</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function dibujar() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (20, 20, 150, 100);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 350);
}
</script>
</head>
<body onload="dibujar();">
<canvas id="canvas" width="200" height="400" style="border-style:solid;">
Su navegador no tiene soporte para mostrar el contenido
</canvas>
</body>
</html>
Si investigas un poco sobre el cdigo podrs comprender con facilidad qu es lo que hace. No vamos a entrar en detalles
porque no es el objetivo de este curso.
Quizs pienses que esto es relativamente poco til, sin embargo hay un gran potencial detrs del elemento canvas unido a
la potencia de JavaScript. La creacin anterior implica que generamos una imagen a partir de cdigo, esto implica un
potencial enorme, ya que la imagen puede estar ligada a datos (introducidos por el usuario, extrados de una base de datos,
tomados de otra pgina web, etc.), y tambin ligada a eventos (lo cual permite crear movimientos en respuesta a la accin
del usuario, incluso crear juegos) o ligada al tiempo (animaciones, imgenes que van cambiando en el tiempo).
Escribe este cdigo en en editor de textos y gurdalo con un nombre de archivo como ejemplo2.html:
<html>
<head><title>Ejemplo canvas de w3.org curso JavaScript aprenderaprogramar.com </title>
<head>
<body>
<h1> Ejemplo canvas curso JavaScript aprenderaprogramar.com </h1>
<canvas id="canvasGlowing" width="800" height="450">
El navegador no admite canvas</canvas>
</body>
<script>
var canvas = document.getElementById('canvasGlowing');
var context = canvas.getContext('2d');
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
lastX, lastY);
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 150);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 140);
</script>
</html>
El resultado esperado es que se dibujen lneas creando un efecto tridimensional en la pantalla (ten en cuenta que en
navegadores antiguos no se mostrar el resultado, slo los navegadores modernos admiten canvas).
d) Dibujar grficos
e) Crear animaciones de todo tipo (matemticas, escolares, publicidad, etc.).
f) Crear espacios tridimensionales por donde el usuario puede moverse
g) Crear juegos
h) Manipular videos por ejemplo crear efectos grficos sobre ellos
i) Hacer todo lo anterior en respuesta a eventos (por interaccin con el usuario)
j) Hacer todo lo anterior ligado a datos variables
Las bolas de la imagen anterior se pueden dibujar con relativa facilidad con Canvas. Tambin se pueden dotar de animacin,
hacer que salten, se dividan, etc.
Si escribes canvas examples en un buscador como google o bing podrs acceder a numerosos ejemplos de uso de canvas.
Muchos de ellos facilitan el cdigo fuente de forma ordenada para que te sea fcil reproducirlo en tu ordenador o
incorporarlo a tus pginas web.