[Advertencia: este tutorial es de iniciación en HTML5]
Lo más importante antes de comenzar a pintar objetos y animaciones sobre un canvas es obtener una instancia del elemento <canvas> situado en el DOM de nuestro html, a través de esta instancia obtendremos el contexto de ese canvas y podremos pintar.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>HTML5 Tutorial 1</title>
</head>
<body style="margin:0px;background-color:#ffffff">
<canvas id='c'></canvas>
<script languaje="JavaScript">
var can;
var ctx;
var backgroundStars_img = new Image();
backgroundStars_img.src = "back_stars.png";
function init() {
can = document.getElementById("c");
ctx = can.getContext("2d");
can.width = 480;
can.height = 320;
ctx.drawImage(backgroundStars_img,0,0,480,320,0,0,480,320);
}
window.onload = init;
</script>
</body>
</html>En resumen el código anterior hace lo siguiente, obtiene de la página el elemento canvas con id 'c' sobre la variable 'can', a partir de esta variable obtenemos el contexto 2D del canvas sobre la variable 'ctx'. Hecho esto, configuramos el ancho y alto del canvas (en píxeles). Y finalmente pintamos una imagen sobre el canvas, empleando la función drawImage que pertenece al contexto.
Primero de todo tenemos la creación del elemento canvas como parte del cuerpo de la página, lo más importante es indicar una id para ese elemento, esto nos permitirá recogerlo desde el código javascript.
En el código javascript, primero creamos 3 variables, 'can', 'ctx' y 'backgroundStars_img'.
Inicializamos la variable backgroundStars_img como un objeto imagen y indicamos que la imagen que va a cargar es "back_stars.png".
Seguidamente se declara la función init(). Esta función configurará el canvas y pintará la imagen en su interior.
La sentencia final "window.onload = init", indica que cuando la página se haya cargado por completo, se ejecutará la función "init()".
En la función init, primero inicializamos la variable can, asignando el elemento del DOM canvas, mediante el uso de su id.
can = document.getElementById("c");Seguidamente asignamos el contexto 2D del canvas a la variable ctx.
ctx = can.getContext("2d");El siguiente paso es configurar las dimensiones del canvas, indicando su ancho y alto:
can.width = 480;
can.height = 320;Finalmente
ctx.drawImage(backgroundStars_img,0,0,480,320,0,0,480,320);
drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img: es una instancia de un objeto de tipo Image que contiene la imagen a pintar.
sx: es la coordenada x dentro de la imagen a partir de la que empezamos a recortar.
sy: es la coordenada y dentro de la imagen a partir de la que empezamos a recortar.
swidth: el ancho en píxeles del recorte que haremos a la imagen.
sheight: el alto en píxeles del recorte que haremos a la imagen.
x: la coordenada x dentro del canvas donde pintaremos la imagen.
y: la coordenada y dentro del canvas donde pintaremos la imagen.
width: el ancho que tendrá la imagen final.
height: el alto que tendrá la imagen final.
Hasta aquí este tutorial, espero que haya sido un tutorial claro y que os ayude a dar un primer paso para programar sobre el canvas de HTML5.
Aquí tenéis la imagen que he pintado sobre el canvas:
Un saludo!
no me funciona al cargar la imagen como hago
ResponderEliminarHola edinson!
EliminarSi lo estás probando en local, sin ningún servidor encendido, la imagen del ejemplo debes situarla en la misma carpeta.
Si lo estás probando en un servidor, la imagen debe estar en el mismo path.
Por ejemplo:
www.dominio.com/nivel_0/archivo.html
www.dominio.com/nivel_0/back_stars.png
Espero haberte solucionado el problema!