Cómo mostrar una imagen (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
El elemento Canvas es una región en la que se puede dibujar dentro de tu documento HTML y en la que puedes usar JavaScript para generar gráficos como animaciones, dibujos y juegos. Este tema comienza describiendo los pasos necesarios para animar una imagen con el elemento Canvas.
Requisitos previos
En este tema se presupone que:
- Sabes crear una aplicación de la Tienda Windows básica con JavaScript que usa la plantilla Biblioteca de Windows para JavaScript.
- Comprendes los conceptos básicos de HTML y JavaScript.
Para obtener instrucciones sobre cómo crear tu primera aplicación de la Tienda Windows con JavaScript, consulta Crear la primera aplicación de la Tienda Windows con JavaScript. Para obtener instrucciones sobre el uso de la plantilla de WinJS, consulta el tema sobre cómo obtener y usar el kit de herramientas de WinJS.
Instrucciones
Paso 1: Obtener el contexto de representación
Antes de que podamos dibujar una imagen en nuestro Canvas, tenemos que obtener el contexto de representación del elemento Canvas. El contexto de representación es el lugar en el que se definen todos los métodos y propiedades de dibujo. Dado que cada elemento <canvas> tiene un contexto de representación asociado (que con frecuencia tiene el nombre de variable ctx), no podemos acceder a este contexto hasta que la página se haya cargado completamente (es decir, hasta que el elemento canvas esté en medio del DOM). Una manera de garantizar que el elemento canvas esté disponible en el DOM es colocar tu bloque de scripts al final de la página, como se muestra aquí:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
.
.
.
</style>
</head>
<body>
.
.
.
<script>
.
.
.
</script>
</body>
</html>
Ahora podemos obtener el contexto de representación como se muestra a continuación:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
canvas {
border: 1px black solid; /* Draw a border around the canvas element. */
}
</style>
</head>
<body>
<canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
<script>
var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');
</script>
</body>
</html>
Como se puede observar, el elemento canvas espera una imagen de 491px por 538px. Para obtener el contexto (ctx), se extrae una lista de todos los elementos de Canvas dentro del DOM, se elige el primero (y único) y se adquiere su contexto mediante una llamada a getContext('2d').
Paso 2: Cargar la imagen para mostrar
Dado que las imágenes pueden tardar un tiempo considerable en descargarse en el cliente, solo se debe acceder a ellas después de que se hayan cargado completamente. Esto puede realizarse mediante el uso del controlador de eventos onload del objeto de imagen, de la siguiente manera:
var imageToDraw = new Image();
imageToDraw.onload = function() {
// It is now safe to access the image.
}
imageToDraw.src = 'images/duckCat.jpg';
En este ejemplo, se llama a la función anónima después de que la imagen asociada (duckCat.jpg) se haya cargado completamente.
Paso 3: Mostrar la imagen
Mediante el controlador de eventos onload, se puede mostrar la imagen en el Canvas de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas element image drawing</title>
<style>
body {
width: 402px; /* Accommodate the 1px canvas borders. */
margin: 0 auto; /* Center the page's content. */
}
h1 {
text-align: center;
}
canvas {
border: 1px black solid; /* Draw a border around the canvas element. */
}
</style>
</head>
<body>
<h1>How to display an image using the canvas element</h1>
<canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
<script>
var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');
var imageToDraw = new Image();
imageToDraw.onload = function() {
ctx.drawImage(imageToDraw, 0, 0);
}
imageToDraw.src = 'images/duckCat.jpg';
</script>
</body>
</html>
Observaciones
El método drawImage acepta más parámetros que los que se muestran en el ejemplo anterior, y es muy eficaz. Para más información, consulta Usar imágenes en el sitio web de Mozilla Developer Network.