Canvas y 'animaciones'

[Albuss]

Iniciado por Carlangueitor

Revisé el primer archivo JS (que no es lo que te genera problemas, pero si así haces todo tienes problemas), es malo:

Código Javascript:

document.getElementById('TestNombre').style.width = (950*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.height = (40*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.marginTop = (100*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.marginLeft = (15*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.width = (950*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.height = (40*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.marginTop = (100*this.ProportionResolutionX) + 'px';
document.getElementById('TestNombre').style.marginLeft = (15*this.ProportionResolutionY) + 'px';
document.getElementById('TestNombre').style.fontSize = (22*this.ProportionResolutionY) + 'px';
 

Haces la busqueda en el DOM 8 veces, fuera de que sea una mala práctica por el código duplicado eso carga demasiado, deberías hacer algo así:

Código Javascript:

var testNombre = document.getElementById('TestNombre');
 

Y trabajar con ese objeto.

Luego eso es lo que pasa, por cada punto, cada vez que se mueve haces el lookup:

Código Javascript:

document.getElementById('Point'+this.ID).style.webkitTransform = 'translate('+this.CoordinateX+'px,'+this.CoordinateY+'px)';
 

Cachea el elemento y llamalo cuando lo necesites.

Saludos

Lo del los nombres no me preocupa por que es solo texto, si , visto asi parece muy flagrante pero es algo que hice para adaptalo a todas la resoluciones.

Los 'points' no van asi, con DOM y CSS le asigno a cada objeto una id a parte de un nombre definitorio para cada uno , por ejemplo, el punto con id 5 : 'point' + id.

Eso es para poder recuperar su valor y manipularlo, no veo nada de malo, me gustaria que me explicases eso mas a fondo.