cambiar vista de canvas

jurebet81 · #1 (**permalink**) 15/03/2011, 21:08

si tengo una figura en un canvas(height = "100" width "100") y su posición en el canvas es(0, 100) , luego, después de hacer canvas.scale (2,2). no veo la figura, porque el zoom se hace en la posicion (0,0)
cómo hago para ver la figura en la posición (0, 100) ???
Gracias amigos

Panino5001 · #2 (**permalink**) 15/03/2011, 21:33

Si la idea es que la figura permanezca en el mismo lugar podés usar el método translate aplicando una traslación horizontal igual canvas.width/escalado horizontal*-1, y lo mismo para la traslación vertical con canvas.height. Ejemplo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
</head>

<body>
<canvas width="100" height="100" id="pp"></canvas>
<script type="text/javascript">
function $(x){return document.getElementById(x);}
var ctx=$('pp').getContext('2d');
ctx.fillStyle="rgb(100,100,100)";
ctx.fillRect(0,0,100,100);
ctx.fillStyle="rgb(255,0,0)";
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2,true);
ctx.fill();
</script>
<canvas width="100" height="100" id="pp2"></canvas>
<script type="text/javascript">
ctx=$('pp2').getContext('2d');
ctx.fillStyle="rgb(100,100,100)";
ctx.fillRect(0,0,100,100);
ctx.scale (2,2);
ctx.translate(-50,-50);
ctx.fillStyle="rgb(255,0,0)";
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2,true);
ctx.fill();
</script>
</body>
</html>

PD: Ojo con el orden. Si cambiamos el orden escalado/traslado, la traslación a aplicar debe cambiar para lograr lo mismo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
</head>

<body>
<canvas width="100" height="100" id="pp"></canvas>
<script type="text/javascript">
function $(x){return document.getElementById(x);}
var ctx=$('pp').getContext('2d');
ctx.fillStyle="rgb(100,100,100)";
ctx.fillRect(0,0,100,100);
ctx.fillStyle="rgb(255,0,0)";
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2,true);
ctx.fill();
</script>
<canvas width="100" height="100" id="pp2"></canvas>
<script type="text/javascript">
ctx=$('pp2').getContext('2d');
ctx.fillStyle="rgb(100,100,100)";
ctx.fillRect(0,0,100,100);
ctx.translate(-100,-100);
ctx.scale (2,2);
ctx.fillStyle="rgb(255,0,0)";
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2,true);
ctx.fill();
</script>
</body>
</html>