Utilisation de graphismes avec la zone de dessin, SVG et CSS3 (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Cette section contient des informations sur l’utilisation de graphiques dans votre application du Windows Store en JavaScript.
Dans cette section
| Rubrique | Description |
|---|---|
L’élément de zone de dessin produit sur votre page une zone de dessin bitmap rectangulaire dans laquelle vous pouvez utiliser JavaScript pour dessiner des images à la volée. La zone de dessin est idéale pour créer des jeux ou toute situation dans laquelle vous générez des graphismes en temps réel ou vous modifiez ceux-ci régulièrement. |
|
L’élément zone de dessin correspond à la zone d’un document HTML sur laquelle il est possible de générer des illustrations graphiques (animations, jeux...) en JavaScript. Cette rubrique explique la procédure à suivre pour animer un dessin élémentaire à l’aide de l’élément zone de dessin. |
|
Les formes et lignes se limitent à des aplats de couleurs. Le dégradé utilisé dans une zone de dessin est en fait un type de valeur de couleur et peut donc être appliqué aux propriétés fillStyle et strokeStyle. Les dégradés peuvent être utilisés pour modifier l’intensité ou la couleur d’une image. Ils sont particulièrement indiqués pour produire des images d’arrière-plan, indiquer l’altitude sur une carte ou ajouter de la lumière et des ombres à une surface. Les dégradés sont utiles dans les applications Web puisqu’ils permettent d’éviter l’utilisation d’images pour ces effets et de minimiser la bande passante et le temps nécessaire à les télécharger. Et comme ils sont produits par programme, ils peuvent facilement être redimensionnés et réutilisés. |
|
L’élément zone de dessin correspond à la zone d’un document HTML sur laquelle il est possible de générer des illustrations graphiques (animations, jeux...) en JavaScript. Cette rubrique explique la procédure à suivre pour afficher une image à l’aide de l’élément zone de dessin. |
Vous pouvez utiliser les éléments de zone de dessin CSS et SVG dans les applications du Windows Store pour ajouter des images vectorielles rapides et légères afin d’animer leur interface utilisateur.
Pratiquement toute image vectorielle peut être dessinée à l’aide de la technologie SVG ou Canvas, mais parfois beaucoup reste à faire par le développeur ou par l’ordinateur suivant la tâche à réaliser.
Les transformations 2D CSS3 (feuilles de style en cascade niveau 3) vous permettent de déplacer, de faire pivoter, de redimensionner et d’incliner les objets dans un espace 2D. Les transformations 3D CSS3 prennent en charge ces mêmes transformations dans un espace 3D en ajoutant la possibilité de simuler une impression de profondeur par le biais d’une transformation de perspective.
Lorsque plusieurs transformations sont spécifiées séparément, leurs résultats se cumulent et dépendent de l’ordre dans lequel elles sont appliquées.