Imágenes reflejadas
Crear una imagen reflejada en canvas es muy fácil. El secreto está en redimensionar el contexto del canvas para darle la vuelta: ctx.scale(-1,1); pero primero tenemos que trasladar el contexto exactamente dos alturas de imagen (2*this.height). De otra manera el contexto quedará totalmente fuera del lienzo.
ctx.translate(0, 2*this.height); ctx.scale(-1,1);
Veamos el código:
Primero definimos el canvas c, el contexto ctx y guardamos la anchura y la altura del mismo en dos variables: cw para la anchura y ch para la altura.
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = 250,cx=cw/2;
var ch = c.height = 358,cy=ch/2;A continuación necesitamos especificar la imagen que queremos utilizar.
var img = new Image();
// define el valor del atributo src para la nueva imagen
img.src = "lo-que-fuera.jpg";Las imágenes tardan en cargarse, y aunque esta demora fuera de solo una fracción de segundo, probar a utilizar una imagen inexistente, resultaría en error. Para que esto no pase tenemos que escribir una función anónima que dibuja la imagen con drawImage(), y enlazar esta función como retrollamada ( callback ) al evento onload.
En este caso la palabra clave this se refiere a la nueva imagen.
img.onload = function() {
ctx.drawImage(this, 0, 0);
ctx.translate(0, 2*this.height);
ctx.scale(1,-1);
ctx.drawImage(this, 0, 0);
}See the Pen Imagen reflejada by Gabi (@enxaneta) on CodePen.
En el caso que queremos reflejar la imagen horizontalmente, el código tendría este aspecto:
img.onload = function() {
ctx.drawImage(this, 0, 0);
ctx.translate(2*this.width,0);
ctx.scale(-1,1);
ctx.drawImage(this, 0, 0);
}See the Pen Imagen reflejada by Gabi (@enxaneta) on CodePen.