Dans cette troisième vidéo sur l’API JavaScript Canvas, apprenez à réaliser des ombrage sur vos dessins.
Découvrez aussi comment agir sur vos dessins avec les transformations comme les rotations, les zooms, etc.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment ajouter des ombres des transformations et des lignes avec API JavaScript Canvas
Bonjour à tous et bienvenu sur Développement Facile.
Ici Matthieu expert en développement applicatif, on continue ensemble la série avec une nouvelle vidéo, un nouveau cours dédié à l’utilisation de l’API Canvas avec JavaScript, pour effectuer des dessins ça va créer des graphismes, soit pour votre application, soit pour votre jeu, tout ça avec le code JavaScript.
Canvas avec JavaScript
C’est partit, vous pouvez, lorsque vous avez dessiné un cercle, un rectangle, ou une forme polygone ou du texte, vous pouvez ajouter une ombre, une ombre portée, ça va donner un mouvement de recul, un effet à vos dessins, vous avez différents attributs, ShadowOffsetX c’est le nombre de pixels de décalage entre l’élément et son ombre dans le sens de la longueur, ShadowOffesetY c’est dans le sens de la hauteur, shadowBlur c’est la taille de l’effet comme ça, c’est la taille du flou qui est affectée à l’ombre, vous avez défini votre ombre, vous pouvez la rendre plus ou moins flou avec ShadowBlur, et Shadowcolor c’est la couleur de l’ombre tout simplement. Si vous êtes développeurs actionscript flash, vous connaissez ça ressemble c’est un petit peu les mêmes paramètres.
Ensuite Canvas gère aussi les transformations, les rotations, zoom/dézoom, donc scale ça modifie l’échelle d’un élément en hauteur et en largeur, vous pouvez choisir le zoom en largeur, le zoom en hauteur donc définir en pourcentage l’échelle, donc c’est une valeur de 0 à 1 pour l’échelle de votre élément, rotate c’est pour effectuer une rotation de votre élément, vous utilisez math.PI xxx pour la rotation, translate c’est pour déplacer un événement soit sur les Y, sur les Y comme ça, ou sur l’axe des X, et transform sa gère une matrice de transformation ça permet de réaliser plusieurs opérations de transformations en même temps.
Vous pouvez également dessiner une ligne avec la méthode lineTo, il y a différents attributs pour afficher cette ligne, lineWidht c’est la grosseur de la ligne tracée, lineCap ça gère le type de ligne entre les bouts, la valeur par défaut c’est butt mais vous pouvez mettre round pour avoir des bouts arrondi et square pour avoir des bouts carrés. Et lineJoin ça gère jointures entre deux lignes pareil, la valeur par défaut est miter pour avoir une pointe entre les deux, pour faire une flèche et vous pouvez mettre round pour faire une pointe arrondie et bevel pour un bout coupé en fait tout simplement.
Voir les exemples JavaScript
Donc on va voir ensemble des exemples de code source ça va être beaucoup plus parlant donc notamment avec utilisation des ombres pour ajouter des ombres sur vos formes, sur vos dessins pour effectuer des transformations, rotations, agrandissements, réductions, des translations et également pour utiliser les options sur les lignes avec les bouts ronds, les bouts carrés, c’est parti pour l’exemple de code source.
Alors comme d’habitude vous avez votre balise Canvas ici pour utiliser l’API Canvas, toujours un id unique pensez-y, largeur, hauteur la balise view port pour indiquer les paramètres d’affichages pour les Smartphones et les tablettes, l’inclusion du fichier CSS, la feuille de style, et bien évidemment vous avez également le fichier JavaScript donc tout se passe dans le fichier JavaScript pour utiliser l’API canvas, dès que l’événement down contente modèle est envoyé par JavaScript on appelle la fonction drow, on récupère notre balise canvas, le contexte pour dessiner en 2D et donc là on va rajouter une ombre sur les éléments avec les différentes propriétés du contexte, la couleur, l’effet de flou, la taille de l’ombre en X et en Y, on effectue un agrandissement du dessin, là on agrandi notre rectangle aux angles en arrondis qui est dessiné ici, si ça je le commente et que je recharge la page, il est affiché en taille normale, tout simplement.
Je refais une multiplication par deux de l’affichage, dessin du rectangle aux bords arrondis, entre-temps je change l’offset c’est à dire l’élément, je change la couleur de l’ombre, surtout sa taille de l’ombre et l’effet de Shadow et sa couleur, donc c’est pour ça que là vous avez une certaine taille de l’ombre, une certaine couleur donc les deux couleurs sont différentes et j’effectue une rotation donc une rotation du deuxième dessin, en fait l’API canvas fonctionne de cette façon, c’est-à-dire vous mettez des paramètres qui sont pris en compte et si vous mettez d’autres paramètres ils seront pris en compte après, donc d’abord vous définissez les paramètres du contexte, ensuite vous dessinez, là vous remodifiez les paramètres du contexte concernant l’ombre et vous remodifiez, scale c’est pour effectuer une réduction du dessin, au début il a été agrandi fois deux, là on le réduit, si je le réduis encore vous allez voir qu’il va être beaucoup plus petit si je continue non, pardon, là je l’ai agrandis, je continue de réduire la taille du dessin, tout simplement. Voilà il est encore réduit, je peux l’agrandir donc en fait tout se cumule donc vous avez le scale qui effectue un agrandissement fois deux et là ça effectue une réduction de votre dessin tout simplement, là, la gestion de la couleur des contours qui a été changée, donc c’est pour ça que la couleur est différente et le dessin du rectangle, et la taille de police je vais la réduire un petit peu, je me suis trompé de touche, le temps de récupérer le fichier, ici, voilà, j’ai dit que je réduisais la police, voilà, la police est réduite donc voyez que l’ombre est un peu trop épaisse du coup je vais la réduire également, une ombre très légère par contre avec un effet de flou important donc l’ombre est très légère, l’effet de flou est trop important donc c’est comme ça vous allez jouer un peu avec pour voir ce que ça donne en direct suivant les tests que vous faites, tout simplement voilà donc vous avez vu c’est très simple à utiliser l’API canvas, parce que vous pouvez faire énormément de choses avec voilà les différentes modifications, là on ne voit plus très bien je vais mettre à 45 la valeur et après c’est vraiment fonction de ce que vous avez besoin, ça va vous permettre de définir, de créer des dessins, en fait c’est souvent ça va vous permettre de créer les graphismes de de vos jeux vidéo, tout simplement si j’enlève la rotation bien évidemment ça va s’afficher droit, voilà vous avez vu c’est très simple à utiliser l’API canvas.
Votre plan d’actions !
Maintenant c’est à vous de jouer, vous avez plusieurs cours pour utiliser l’API canvas pour effectuer des dessins de plus en plus complexes grâce à JavaScript, donc c’est à vous de jouer, à vous de mettre en pratique sous cette vidéo, comme d’habitude vous retrouverez le code source en téléchargement, si vous avez des questions posez les directement sous cette vidéo, l’équipe développement facile vous répondra, maintenant je vous invite à aller dans la deuxième vidéo vous avez un lien cliquez ici pour lancer la deuxième vidéo donc une image, dans la deuxième vidéo, vous allez apprendre tout l’essentiel qui va vous apporter 80 % de vos résultats pour créer des applications performantes deux à trois fois plus rapidement vous allez apprendre l’essentiel en JavaScript, la programmation orientée objet, la programmation événementielle, les design patterns, l’utilisation des Framework ça va vous permettre de simplifier votre développement à un niveau incroyable, tout ça c’est dans la deuxième vidéo, on se retrouve ensemble dans la deuxième vidéo cliquez simplement sur ce lien, sur cette image lancer la vidéo deux, vous pouvez même me poser toutes vos questions dans la deuxième vidéo et je vous réponds avec des exemples détaillés de code source. Je vous retrouve dans la deuxième vidéoà tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple de dessin avec ses ombres
Retrouver le code source commenté de l’exemple vu dans la vidéo
Téléchargement du code source JavaScript Canvas partie 3
