 code pour une animation html5 "retina", ou comment contraindre un canvas par CSS |
 |
Bienvenue invité ( Connexion | Inscription )
 26 Aug 2018, 17:11
Message
#1
|
|
 Macbidouilleur d'argent !  Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656  |
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. |
 |
 
|
 |
Réponse(s)
|
30 Aug 2018, 00:23
Message
#2
|
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 792 Inscrit : 14 Nov 2003 Lieu : Genève Membre no 11 656 |
Merci pour ta réponse zzibes !
Je ne comprends pas bien pourquoi nous serions obligé d'utiliser du javascript pour afficher un canvas à 50%. Impossible de le contraindre par du CSS ? Et j'imagine qu'il devrait y avoir un moyen, avec les media queries peut-être, d'afficher une petite animation pour les écran normaux et une animation 2x plus grande pour les écrans rétina, un peu sur cette base pour les images : Code <!doctype html> <html lang="fr"> <head> <style> div#monimage{width: 300px; height: 250px; } @media only screen and (-webkit-max-device-pixel-ratio: 1.5), only screen and (-o-max-device-pixel-ratio: 3/2), only screen and (max--moz-device-pixel-ratio: 1.5), only screen and (max-device-pixel-ratio: 1.5) { div#monimage{ background: url(monimage.jpg) no-repeat; } } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { div#monimage{ background-image: url([email protected]); background-size: 300px 250px; } } </style> </head> <body> <div id="monimage"></div> </body> </html> ... et l'image [email protected] est 2 fois plus grande que monimage.jpg. Ou faudra-t-il attendre html6 ? ps. si jamais, pour la clarté du forum, essaie d'utiliser les balises <code>blablabla</code> (en fait entre crochet [] pour que ça marche), pour afficher du code. (ou il y a un bouton en dessous des polices) 
Ce message a été modifié par toluol - 30 Aug 2018, 00:29. |
|
|
|
|
11 Sep 2018, 15:07
Message
#3
|
|
 Macbidouilleur d'Or ! Groupe : Membres Messages : 5 018 Inscrit : 1 Jul 2010 Membre no 156 073 |
Citation (toluol @ 30 Aug 2018, 01:23)  Je ne comprends pas bien pourquoi nous serions obligé d'utiliser du javascript pour afficher un canvas à 50%. Impossible de le contraindre par du CSS ? Bonjour, l'élément canvas permet d'y « peindre » des pixels. Pour afficher un élément de 100px de large (valeur CSS), un écran basse définition utilise 100px, un écran haute définition 200px (ou 300px, etc selon la densité de pixels de l'écran). Si tu dessines sur un canvas de 200px pour finalement le redimensionner à 100px en CSS, tu demandes deux fois plus de calcul que nécessaire à l'appareil doté d'un écran basse définition. C'est pour cela qu'il est préférable de détecter la densité de pixels de l'appareil avant de dessiner. Un exemple de plus : Code // sélection et définition du contexte du canvas
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // dimensions CSS var largeur = 200; var hauteur = 100; canvas.style.width = largeur + 'px'; canvas.style.height = hauteur + 'px'; // densité de pixels, redimensionnement du canvas var ratio = window.devicePixelRatio; canvas.width = largeur * ratio; canvas.height = hauteur * ratio; // mise à l'échelle pour correspondre aux dimensions CSS ctx.scale(ratio, ratio); -------------------- L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
|
|
|
|
Les messages de ce sujet
toluol code pour une animation html5 "retina" 26 Aug 2018, 17:11
Philippe64 Bonjour,
Si tu mets la page en ligne ce sera plus ... 26 Aug 2018, 17:37 toluol voici mon exemple test.
J'ai beau enlever les... 26 Aug 2018, 20:17 yponomeute Salut,
Un simple coup d'oeil à ton fichier i... 27 Aug 2018, 07:37 toluol J'avais bien essayé de modifier cela aussi (2... 27 Aug 2018, 08:39 zzibes Salut,
si tu inspectes la balise de ton div ... 27 Aug 2018, 10:05 toluol Hum... Ben, le "300" dans l'index.... 27 Aug 2018, 10:44 zzibes Visiblement tu as cru changer mais ça n'est p... 27 Aug 2018, 10:46 toluol Ah bon ? ... Ben pourtant, je lis bien "300... 27 Aug 2018, 10:59 zzibes Ok. On s'est mal compris. Étant donné que l... 27 Aug 2018, 14:56 toluol non, l'animation du test 2 est rogné (le mot ... 27 Aug 2018, 15:54 zzibes ok je comprends mieux ton pb, n'ayant pas cré... 27 Aug 2018, 18:42
No6 Citation (toluol @ 30 Aug 2018, 01:23) Ou... 7 Sep 2018, 16:31
toluol Effectivement, tout est plus clair maintenant ... 4 Oct 2018, 14:55 |
2 utilisateur(s) sur ce sujet (2 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :
| Nous sommes le : 13th November 2025 - 00:07 |