html5 - diseño - Cómo evitar el autoestiramiento de HTML Canvas

canvas html

Question

Tengo la siguiente pieza de HTML:

<style type="text/css">
    #c{width:200px;height:500px}
</style>
<canvas id="c"></canvas>
<script type="text/javascript">
    var i = new Image();
    i.onload = function () {
        var ctx = document.getElementById(''c'').getContext(''2d'');
        ctx.drawImage(i, 0, 0);
    }
    i.width = i.height = 20; // actual size of square.png
    i.src = ''square.png'';
</script>

El problema es que la imagen dibujada se estira automáticamente (se redimensiona) proporcionalmente con el tamaño del lienzo. He intentado usar todos los parámetros disponibles ( drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20) ) y eso no ayudó.

¿Qué está causando que se estire mi dibujo y cómo puedo evitarlo?

Gracias,
Tom

Answer 1

Me resultó más fácil simplemente poner un bucle while esperando el tiempo de espera dentro de mi bucle de animación, por ejemplo:

function animate() {
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    ryuji.draw();
    ryuji.update();
    let now = Date.now();
    then = now + (1000 / fps);
    while (Date.now() < then) {

    }
    requestAnimationFrame(animate);
}

Answer 2

Necesita los atributos de width y height en el elemento canvas. Especifican el espacio de coordenadas para el lienzo. Aparentemente, tiene un lienzo con una relación de aspecto 2: 1, que su CSS está sesgando en un cuadrado.

Answer 3

Ok, un poco más simple (y más ligero) que JQuery es ... ¡JAVASCRIP MISMO por supuesto!

Si necesita cambiar dinámicamente las dimensiones de su lienzo, simplemente use:

document.getElementById(''yourcanvasid'').setAttribute(''width'', aWidth);
document.getElementById(''yourcanvasid'').setAttribute(''height'', aHeight);

Answer 4

Si está utilizando JQuery, no debe configurar el CSS (como los comentaristas mencionados anteriormente). Necesitas configurar el atributo así:

$("canvas").attr(''width'', aWidth);
$("canvas").attr(''height'', aHeight);

Funciona genial.

Answer 5

Vale la pena señalar que los atributos Ancho y Alto del lienzo no son como los atributos de ancho y alto de la escuela anterior <img>. No son un sustituto de CSS. Especifican cuántos píxeles debe tener el búfer de píxeles en el lienzo, y si no le aplica un tamaño con css, css implicará su tamaño a partir de esa forma de ese búfer de píxeles. Establecer el tamaño del elemento en css no establece el tamaño del búfer de píxeles, sino que lo cambia de tamaño. Desde la perspectiva de CSS, un <canvas> es completamente lo mismo que un <img>.