Para recortar una imagen y pegarla en otro lado o superponerla, se puede hacer facilmente usando la función drawImage() con parámetros que indiquen el tamaño del recorte, JS:
function cortarImagen() {
var canvas=document.getElementById("Canvas");
var c=canvas.getContext("2d");
var imagen = new Image();
imagen.onload = function() {
// Pintando la imagen en el canvas
c.drawImage(imagen,100,50, 438*.7, 300*.7);
// Parametros de imagen y nueva imagen
var ima1X = 150;
var ima1Y = 0;
var ima1Width = 150;
var ima1Height = 150;
var ima2X = 350;
var ima2Y = 200;
var ima2Width = sourceWidth;
var ima2Height = ima1Height;
//pintando la imagen recortada
c.drawImage(imagen, ima1X, ima1Y, ima1Width,
ima1Height, ima2X, ima2Y, ima2Width, destHeight);
}
imagen.src = "http://forohtml5.com/forohtml5.png";
}
html:
<canvas id="Canvas" width="576" height="400"></canvas>
</body>
Experto 28 Nov 2010 13:37:08
Quiero suponer que de esta manera se podrían crear sprittes para juegos. Será más rápido cargar una imagen y partirla que tener que cargar x imagenes, al menos en acceso deberá de serlo.
Cosa de seguir investigando para realizar una animación fluida.
A ver si se puede ir tratando por ahí!
Dejar un comentario