es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Javascript – la rotación del lienzo provoca estiramiento.

07 Jun, 2023 Programación

Por alguna razón, si establece la relación de aspecto del lienzo en 2:1, todo parece normal; cualquier otra relación de aspecto lo hará estirarse.

const canvas = document.getElementById('canvas');

canvas.style.width = '400px';
canvas.style.height = '400px';
canvas.style.border = '2px solid black';

const ctx = canvas.getContext('2d');
const w = canvas.width/4;
const h = canvas.height/4;
var relativeAngle = 0;
//(Target is the position I want it; in this case, right in the middle)
const targetX = canvas.width/2;
const targetY = canvas.height/2;
const targetDist = Math.sqrt(targetX ** 2 + targetY ** 2);
const targetAngle = Math.atan(targetY / targetX) * 180 / Math.PI;
ctx.fillStyle = 'red';

function draw(){
    relativeAngle += 3;
    let targetRelativeAngle = targetAngle - relativeAngle;
    let targetRelativeX = targetDist * Math.cos(targetRelativeAngle * Math.PI / 180);
    let targetRelativeY = targetDist * Math.sin(targetRelativeAngle * Math.PI / 180);
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();

    ctx.rotate(relativeAngle * Math.PI / 180);
    ctx.translate(targetRelativeX,targetRelativeY);
    ctx.fillRect(-w/2,-h/2,w,h);

    ctx.restore();

    window.requestAnimationFrame(draw);
}
draw();

¿Cuál es el problema aquí y/o cuál es la mejor manera de hacerlo?

https://jsfiddle.net/1gx7bv3m/

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema es que cuando la relación de aspecto del lienzo no está establecida en 2:1, el lienzo se estira, lo que distorsiona las formas dibujadas en él. La mejor manera de hacer esto es calcular la relación de aspecto del lienzo y establecer su ancho y alto en función de una relación fija, en lugar de definir un ancho y alto específicos. Esto se puede hacer utilizando el siguiente código:

    const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

const canvasRatio = 2 / 1;
const canvasWidth = 400;
const canvasHeight = canvasWidth / canvasRatio;

canvas.style.width = canvasWidth + 'px';
canvas.style.height = canvasHeight + 'px';

canvas.width = canvasWidth * window.devicePixelRatio;
canvas.height = canvasHeight * window.devicePixelRatio;

context.scale(window.devicePixelRatio, window.devicePixelRatio);

    Este código calcula el ancho y alto del lienzo en función de una relación de aspecto fija y lo establece en el elemento de lienzo. También establece el ancho y alto del lienzo para admitir pantallas de alta resolución, escalándolo utilizando la propiedad window.devicePixelRatio. Esto asegura que el lienzo se vea nítido tanto en pantallas regulares como de alta resolución.

Comments are closed.