code pour une animation html5 "retina", ou comment contraindre un canvas par CSS

[toluol]

Bonjour,

Je dois réaliser une animation HTML5 "retina" et je fais mes essais avec animate CC d'Adobe.
Pour une animation de 300x250 pixels "affichée", je réalise donc l'animation à 600x500 pixels sous animale CC.
Après publication, j'essaie de contraindre en CSS mon caneva au petit format, mais rien ne fonctionne.

Quelque chose comme :

Code

<canvas id="canvas" width="600" height="500" style="width:300px;height:250px;"></canevas>

n'a aucun effet sur le code généré par Animate CC. (référence : forum Adobe)

Comment puis-je m'y prendre ? Je ne trouve aucune doc à ce sujet (ou alors, c'est l'exemple que j'ai cité ci dessus)

merci pour toute aide de votre part.

[zzibes]

ok je comprends mieux ton pb, n'ayant pas crée ton animation, je n'ai pas compris qu'elle ne s'affichait pas correctement dans les limites du 300x250.

<Est-on obligé d'utiliser du javascript pour redimensionner une animation "retina" >
A priori oui. D'ailleurs Adobe gère le responsive exclusivement en JS.

Concernant le Retina, si ça peut t'aider j'ai déjà eu un pb de netteté d'animation sur du responsive. J'avais creusé sur sur les forums et trouvé ces fonctions qui à l'époque avait résolu mon pb. Mais ça date, je pensais que le code d'Adobe (de nombreuse fois remanié depuis la V1 d'ACC prenait en compte les écrans Retina à présent).

********************************************************************************
******************************
if (window.devicePixelRatio) {
var height = canvas.getAttribute('height');
var width = canvas.getAttribute('width');
canvas.setAttribute('width', Math.round(width * window.devicePixelRatio));
canvas.setAttribute('height', Math.round(height * window.devicePixelRatio));
canvas.style.width = width + "px";
canvas.style.height = height + "px";
stage.scaleX = stage.scaleY = window.devicePixelRatio;

}
********************************************************************************
******************************

avec la méthode getDevicePixelRatio :

********************************************************************************
******************************
/*! GetDevicePixelRatio | Author: Tyson Matanich, 2012 | License: MIT */
(function (window) {
window.getDevicePixelRatio = function () {
var ratio = 1;
// To account for zoom, change to use deviceXDPI instead of systemXDPI
if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
// Only allow for values > 1
ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
}
else if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
return ratio;
};
})(this);
********************************************************************************
******************************


à+ Seb