binary-sequence
commented
11 years ago Hay otro comportamiento problemático a la hora de detectar click sobre un elemento dibujado en el canvas. Al canvas se le puede asignar dos tipos de tamaño (width-height).
- Uno de ellos es el tamaño que usará el navegador web para representar el elemento canvas (físico).
- Otro es el tamaño que internamente usará el DOM de canvas para representar los gráficos (lógico).
Por ejemplo:
<!-- PruebaDeConcepto.html -->
<!DOCTYPE html>
<html>
<head>
<style>
#canvas {
border:1px solid black;
width:640px;
height:480px;
}
#canvas:hover {
width:1024px;
height:768px;
}
</style>
</head>
<body>
<canvas id="canvas">No soportado.</canvas>
</body>
<script>
var fondo = new Image();
fondo.src = "fondo.jpg"; // 800*600
var canvas = document.getElementById('canvas');
// Tamaño interno (en píxeles).
canvas.width = 800;
canvas.height = 600;
contexto = canvas.getContext('2d');
contexto.drawImage(fondo, 0, 0);
</script>
</html>Se puede observar cómo el canvas interno se comporta a escala. Si se usa un tamaño físico diferente del lógico (por ejemplo resposive web design para smartphones y tablets) habría que poder traducir de píxeles físicos a píxeles lógicos y viceversa.
hugoruscitti
A ver qué os parecen estas ideas.