- drawImageR(context, image, x, y, angle)
La forma de usarla difiere de la función drawImage porque drawImage es un método del contexto del canvas, mientras que drawImageR no, por lo tanto, sea ctx el contexto del canvas, haremos:
ctx.drawImage(...)o
drawImageR(ctx, ...)
La función se puede modificar y ampliar para cubrir otras necesidades específicas, como por ejemplo rotar la imagen respecto a otro punto distinto del centro o dibujar un trozo específico de la imagen, como permiten las versiones con más parametros de drawImage.
La definición de drawImageR es la siguiente:
function drawImageR(context, image, x, y, angle){
var w_half = image.width/2;
var h_half = image.height/2;
context.save();
context.translate(x + w_half, y + h_half);
context.rotate(angle);
context.drawImage(image, -w_half, -h_half);
context.restore();
}
Ejemplo
Un ejemplo sencillo, suponiendo que en la carpeta /images tenemos la imagen 1.jpg (un cuadrado con la mitad izquierda roja y la mitad derecha verde) usaremos la función ya conocida loadImages para cargarla y después dibujaremos una copia rotada y otra sin rotar, en la misma posición.<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="my_canvas" width="300px" height="200px"
style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var images = loadImages('./images/1.jpg', load_done);
var cuadrado = images[0];
function drawImageR(context, image, x, y, angle){
var w_half = image.width/2;
var h_half = image.height/2;
context.save();
context.translate(x + w_half, y + h_half);
context.rotate(angle);
context.drawImage(image, -w_half, -h_half);
context.restore();
}
function loadImages() { //images and callback
var n = arguments.length - 1;
var callback = arguments[n]
var images = new Array();
var count = 0;
for (i = 0; i < n; i++) {
images[i] = new Image();
images[i].onload = function(){
count++;
if (count == n){
callback ();
};
};
images[i].src = loadImages.arguments[i];
};
return images;
}
function load_done() {
drawImageR(ctx, cuadrado, 20, 50, 45*Math.PI/180);
ctx.drawImage(cuadrado, 20, 50);
}
</script>
</body>
</html>
