Dans cette troisime vido sur l'API JavaScript Canvas, apprenez raliser des ombrage survos dessins. Dcouvrez aussi comment agir sur vos dessins avec les transformations commeles rotations, les zooms, etc. Tout est dans la vido ci-dessous.

jQLeadBrite("#leadplayer_video_element_5484CE738CB27").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTQ4NENFNzM4Q0IyNyIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgYWpvdXRlciBkZXMgb21icmVzLCBkZXMgdHJhbnNmb3JtYXRpb25zIGV0IGRlcyBsaWduZXMgYXZlYyBBUEkgSmF2YVNjcmlwdCBDYW52YXMiLCJkZXNjcmlwdGlvbiI6IkNvbW1lbnQgYWpvdXRlciBkZXMgb21icmVzLCBkZXMgdHJhbnNmb3JtYXRpb25zIGV0IGRlcyBsaWduZXMgYXZlYyBBUEkgSmF2YVNjcmlwdCBDYW52YXMiLCJhdXRvcGxheSI6ZmFsc2UsInNob3dfdGltZWxpbmUiOnRydWUsImVuYWJsZV9oZCI6dHJ1ZSwib3B0IjpmYWxzZSwiY3RhIjp7InRpbWUiOiJlbmQiLCJidGV4dCI6IkRcdTAwZTljb3V2cmV6IGNvbW1lbnQgY3JcdTAwZTllciBkZXMgQXBwbGljYXRpb25zIEphdmFTY3JpcHQgXC8gSFRNTDUgIHBlcmZvcm1hbnRlcyAhIiwidXJsIjoiaHR0cDpcL1wvd3d3LnByb2dyYW1tYXRpb24tZmFjaWxlLmNvbVwvamF2YXNjcmlwdC1odG1sNS1wcm9mZXNzaW9ubmVscy1mb3JtYXRpb25cLyIsImF1dG9fZm9sbG93IjpmYWxzZSwibmV3X3dpbmRvdyI6ZmFsc2V9LCJ5bSI6ImswVkpCMlhWbGNrIn0=");

Afficher le texte de la vidoComment ajouter des ombres des transformations et des lignes avec API JavaScriptCanvas Bonjour tous et bienvenu sur Dveloppement Facile. Ici Matthieu expert endveloppement applicatif, on continue ensemble la srie avec une nouvelle vido, un nouveaucours ddi l'utilisation de l'API Canvas avec JavaScript, pour effectuer des dessins a vacrer des graphismes, soit pour votre application, soit pour votre jeu, tout a avec le codeJavaScript.Canvas avec JavaScript C'est partit, vous pouvez, lorsque vous avez dessin uncercle, un rectangle, ou une forme polygone ou du texte, vous pouvez ajouter une ombre, uneombre porte, a va donner un mouvement de recul, un effet vos dessins, vous avezdiffrents attributs, ShadowOffsetX c'est le nombre de pixels de dcalage entre l'lment et sonombre 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 affecte l'ombre,vous avez dfini votre ombre, vous pouvez la rendre plus ou moins flou avec ShadowBlur, etShadowcolor c'est la couleur de l'ombre tout simplement. Si vous tes dveloppeursactionscript flash, vous connaissez a ressemble c'est un petit peu les mmes paramtres.

1 / 4

Ensuite Canvas gre aussi les transformations, les rotations, zoom/dzoom, donc scale amodifie l'chelle d'un lment en hauteur et en largeur, vous pouvez choisir le zoom en largeur,le zoom en hauteur donc dfinir en pourcentage l'chelle, donc c'est une valeur de 0 1 pourl'chelle de votre lment, rotate c'est pour effectuer une rotation de votre lment, vous utilisezmath.PI xxx pour la rotation, translate c'est pour dplacer un vnement soit sur les Y, sur les Ycomme a, ou sur l'axe des X, et transform sa gre une matrice de transformation a permet deraliser plusieurs oprations de transformations en mme temps. Voil les transformations avecla balise Canvas. Vous pouvez galement dessiner une ligne avec la mthode lineTo, il y adiffrents attributs pour afficher cette ligne, lineWidht c'est la grosseur de la ligne trace,lineCap a gre le type de ligne entre les bouts, la valeur par dfaut c'est butt mais vous pouvezmettre round pour avoir des bouts arrondi et square pour avoir des bouts carrs. Et lineJoin agre jointures entre deux lignes pareil, la valeur par dfaut est miter pour avoir une pointe entreles deux, pour faire une flche et vous pouvez mettre round pour faire une pointe arrondie etbevel pour un bout coup en fait tout simplement.

Voir les exemples JavaScript Donc on va voir ensemble des exemples de code source a vatre beaucoup plus parlant donc notamment avec utilisation des ombres pour ajouter desombres sur vos formes, sur vos dessins pour effectuer des transformations, rotations,agrandissements, rductions, des translations et galement pour utiliser les options sur leslignes avec les bouts ronds, les bouts carrs, c'est parti pour l'exemple de code source. Alorscomme d'habitude vous avez votre balise Canvas ici pour utiliser l'API Canvas, toujours un idunique pensez-y, largeur, hauteur la balise view port pour indiquer les paramtres d'affichagespour les Smartphones et les tablettes, l'inclusion du fichier CSS, la feuille de style, et bienvidemment vous avez galement le fichier JavaScript donc tout se passe dans le fichierJavaScript pour utiliser l'API canvas, ds que l'vnement down contente modle est envoypar JavaScript on appelle la fonction drow, on rcupre notre balise canvas, le contexte pourdessiner en 2D et donc l on va rajouter une ombre sur les lments avec les diffrentesproprits du contexte, la couleur, l'effet de flou, la taille de l'ombre en X et en Y, on effectue unagrandissement du dessin, l on agrandi notre rectangle aux angles en arrondis qui est dessinici, si a je le commente et que je recharge la page, il est affich en taille normale, toutsimplement. Je refais une multiplication par deux de l'affichage, dessin du rectangle aux bordsarrondis, entre-temps je change l'offset c'est dire l'lment, 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 vousavez une certaine taille de l'ombre, une certaine couleur donc les deux couleurs sont diffrenteset j'effectue une rotation donc une rotation du deuxime dessin, en fait l'API canvas fonctionnede cette faon, c'est--dire vous mettez des paramtres qui sont pris en compte et si vousmettez d'autres paramtres ils seront pris en compte aprs, donc d'abord vous dfinissez lesparamtres du contexte, ensuite vous dessinez, l vous remodifiez les paramtres du contexteconcernant l'ombre et vous remodifiez, scale c'est pour effectuer une rduction du dessin, audbut il a t agrandi fois deux, l on le rduit, si je le rduis encore vous allez voir qu'il va trebeaucoup plus petit si je continue non, pardon, l je l'ai agrandis, je continue de rduire la tailledu dessin, tout simplement. Voil il est encore rduit, je peux l'agrandir donc en fait tout secumule donc vous avez le scale qui effectue un agrandissement fois deux et l a effectue unerduction de votre dessin tout simplement, l, la gestion de la couleur des contours qui a tchange, donc c'est pour a que la couleur est diffrente et le dessin du rectangle, et la taille depolice je vais la rduire un petit peu, je me suis tromp de touche, le temps de rcuprer le

2 / 4

fichier, ici, voil, j'ai dit que je rduisais la police, voil, la police est rduite donc voyez quel'ombre est un peu trop paisse du coup je vais la rduire galement, une ombre trs lgre parcontre avec un effet de flou important donc l'ombre est trs lgre, l'effet de flou est tropimportant donc c'est comme a vous allez jouer un peu avec pour voir ce que a donne endirect suivant les tests que vous faites, tout simplement voil donc vous avez vu c'est trssimple utiliser l'API canvas, parce que vous pouvez faire normment de choses avec voilles diffrentes modifications, l on ne voit plus trs bien je vais mettre 45 la valeur et aprsc'est vraiment fonction de ce que vous avez besoin, a va vous permettre de dfinir, de crerdes dessins, en fait c'est souvent a va vous permettre de crer les graphismes de de vos jeuxvido, tout simplement si j'enlve la rotation bien videmment a va s'afficher droit, voil vousavez vu c'est trs simple utiliser l'API canvas.Votre plan d'actions ! Maintenant c'est vousde jouer, vous avez plusieurs cours pour utiliser l'API canvas pour effectuer des dessins de plusen plus complexes grce JavaScript, donc c'est vous de jouer, vous de mettre en pratiquesous cette vido, comme d'habitude vous retrouverez le code source en tlchargement, sivous avez des questions posez les directement sous cette vido, l'quipe dveloppement facilevous rpondra, maintenant je vous invite aller dans la deuxime vido vous avez un liencliquez ici pour lancer la deuxime vido donc une image, dans la deuxime vido, vous allezapprendre tout l'essentiel qui va vous apporter 80 % de vos rsultats pour crer desapplications performantes deux trois fois plus rapidement vous allez apprendre l'essentiel enJavaScript, la programmation oriente objet, la programmation vnementielle, les designpatterns, l'utilisation des Framework a va vous permettre de simplifier votre dveloppement un niveau incroyable, tout a c'est dans la deuxime vido, on se retrouve ensemble dans ladeuxime vido cliquez simplement sur ce lien, sur cette image lancer la vido deux, vouspouvez mme me poser toutes vos questions dans la deuxime vido et je vous rponds avecdes exemples dtaills de code source. Je vous retrouve dans la deuxime vido tout desuite.

Tlcharger l'exemple de dessin avec ses ombresRetrouver le code source comment de l'exemple vu dans la vido

Downloads

JavaScript Canvas partie 3

Code source comment de dessins ombrs raliss avec l'API JavaScript Canvas. Lefichier zip contient les fichiers HTML, CSS et JavaScript.

3 / 4

Posez vos questions sur l'API CanvasUtilisez la zone commentaire pour poser vos questions sur ce cours, l'quipe dveloppementfacile y rpondra.Comment ajouter des ombres, des transformations et des lignes avec APIJavaScript Canvas

Powered by TCPDF (www.tcpdf.org)

4 / 4