Dans ce nouveau cours sur l'API JavaScript Canvas, vous allez apprendre copier les pixelsd'un endroit un autre. C'est trs utilis dans la cration de jeux vido ou d'applications Web.Tout est dans la vido ci-dessous.

jQLeadBrite("#leadplayer_video_element_548AEEAAD87B8").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTQ4QUVFQUFEODdCOCIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkxhIHRlY2huaXF1ZSBwb3VyIGNvcGllciBkZXMgcGl4ZWxzIGF2ZWMgQ2FudmFzIGVuIEphdmFTY3JpcHQgIiwiZGVzY3JpcHRpb24iOiJMYSB0ZWNobmlxdWUgcG91ciBjb3BpZXIgZGVzIHBpeGVscyBhdmVjIENhbnZhcyBlbiBKYXZhU2NyaXB0ICIsImF1dG9wbGF5IjpmYWxzZSwic2hvd190aW1lbGluZSI6dHJ1ZSwiZW5hYmxlX2hkIjp0cnVlLCJvcHQiOmZhbHNlLCJjdGEiOnsidGltZSI6ImVuZCIsImJ0ZXh0IjoiQ2xpcXVleiBpY2kgcG91ciBjb25uYVx1MDBlZXRyZSB0b3V0ZXMgbGVzIGNsXHUwMGU5cyBwb3VyIG1hXHUwMGVldHJpc2VyIEphdmFTY3JpcHQiLCJ1cmwiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC9qYXZhc2NyaXB0LWh0bWw1LXByb2Zlc3Npb25uZWxzLWZvcm1hdGlvblwvIiwiYXV0b19mb2xsb3ciOmZhbHNlLCJuZXdfd2luZG93IjpmYWxzZX0sInltIjoiNklTSkptX3VySWcifQ==");

Afficher le texte de la vidoLa technique pour copier des pixels avec Canvas en JavaScript Bonjour tous et bienvenusur Dveloppement Facile. Ici Matthieu expert en dveloppement applicatif, dans cette vidovous allez apprendre manipuler les pixels avec l'API Canvas, toujours en JavaScript, vousavez une image, vous allez apprendre prendre des pixels, les copier un autre endroit dansvotre Canvas, vous allez voir c'est trs pratique si vous avez fait du dveloppementActionScript, flash, c'est galement trs utilis dans la cration de jeux ou d'applications partirde la mme image, on peut crer plusieurs lments d'une interface ou d'un jeu, l vous allezapprendre faire la mme chose avec Canvas.Canvas avec JavaScript Comme je vous l'aidit, vous pouvez copier des pixels d'une partie d'une image, d'un Sprite, d'une forme, de ce quevous voulez, copier tous les pixels et ainsi vous allez pouvoir crer des effets comme modifierles couleurs d'une image, donc modifier la couleur de certains pixels, crer un rendu en noir etblanc, c'est trs intressants la possibilit de copier et de modifier les pixels et a permet derduire galement les ressources externes tlcharger, c'est--dire, vous chargez en principeune ou plusieurs grandes images mais c'est des sprites et a contient plusieurs lments,plusieurs images de votre application vous tlchargez un, deux ou trois gros sprites avec

1 / 4

plusieurs lments et avec copyPixels, ou avec drawimage vous extrayez des parties de cesimages vous retravaillez les couleurs, vous faites ce que vous avez faire en fonction de votreapplication, de votre jeu, c'est trs puissant c'est un chargement beaucoup plus rapide desdonnes donc un affichage plus rapide sur les Smartphones, la tablette ou l'ordinateur de votrevisiteur. Pour rcuprer les pixels d'une image dj vous utilisez la fonction getImageData, doncdans getImageData vous allez rcuprer les pixels sur votre image, donc X et Y c'est le point dedpart et ensuite la largeur et la hauteur vous rcuprez sur une grande image par exemple,juste cette partie, juste cette partie avec X, Y hauteur et largeur, ensuite pour ajouter l'imagedans le canvas HTML vous allez utiliser la fonction putImagedata donc getImagedata a vavous renvoyer un objet image data, que vous renseignez dans putImageData avec les valeursX, Y, les directions X, Y la largeur et la hauteur donc XY c'est pour positionner la copie doncvotre nouvelle image la copie des pixels et tous les autres paramtres, dir X, dir Y, largeur,hauteur, donc je vais vous montrer, donc c'est des directions la largeur, la hauteur, je vais vousmontrer tout cela travers un exemple de code source, plutt que d'tre trop thoriques et devous ennuyer tous vous expliquer, je vous montre le rsultat graphique visuellement c'esttoujours plus simple de comprendre une image vaut mille mots, on passe tout de suite l'exemple de code source.Voir l'exemple de code source Comme d'habitude dans votre fichierHTML, vous intgrez votre fichier CSS, qui est trs simple, vous avez galement intgr votrefichier JavaScript et vous avez prvu donc l, il y a une image qui est intgre avec un id pourpouvoir appeler cette image plus facilement et vous avez votre balise canvas juste ici avec un idpour pouvoir l'appeler et l on a cr un bouton donc une balise avec un id canvas distest et unbouton sur le onclic c'est--dire cliquez ici pour copier les pixels, a va appeler une fonctionJavaScript, tout simplement. Alors qu'est-ce qui se passe ? Une fois que les donnes sontcharges, la fonction draw est appele, on rcupre notre canvas, le contexte, on rcuprel'image donc vous avez vu dans les cours prcdents que vous pouvez utiliser les images, soitune image qui est dj dans la page HTML, soit une URL d'une image donc soit du mmedomaine, soit d'un autre domaine et donc l on utilise une autre technique pour vous montrer enpratique ce que a donne, une image qui est dj dans la page, en l'occurrence cette image quidj dans la page HTML. Une fois qu'on a rcupr l'image on dfinit ce que l'on comprenddans l'image, on prend qu'une partie de l'image, on ne prend pas toute sa largeur, pas toute sahauteur, qu'une partie, et qu'est-ce qu'on fait, on modifie la couleur de l'image, simplement etaprs on crit l'image dans le canvas, alors qu'est-ce que a donne ? On a pris cette partie del'image l, uniquement celle-l, et on l'a modifie, la couleur uniquement sur une partie del'image aprs sur le reste de l'image, comme l'image d'origine tout simplement comme vouspouvez le voir ici, on parcourt et on modifie notre image. Et juste en dessous on va crer undgrad donc un dgrad tout simple, voil un dgrad trs simple, si vous le souhaitez je peuxrajouter une couleur intermdiaire, on va mettre du gris en intermdiaire comme couleur, voil,comme a, a vous montre, c'est un petit peu comme les cours prcdents, a vous montre lefonctionnement du dgrad, donc l il y aura une couleur grise en intermdiaire qui est icisimplement, je vais l'agrandir encore plus, voil il y aura plus de gris ici, et aprs qu'est-ce qu'onfait ? L je vais prendre image, je vais modifier l'image complte, ici, voil, donc l'imagecomplte on modifie toutes les couleurs de l'image entirement, tout simplement, c'est grce ce petit algorithme ou on travail directement sur les pixels, sur la couleur et la copie, oui jevais vous montrer que la copie fonctionne bien, je prends qu'une seule partie, donc dans lacopie d'un pixel qu'est-ce qu'on fait, on prend name canvas, qui est ici simplement, on rcuprenotre contexte, on fait un get image data, on rcupre notre image et on put l'image data donc

2 / 4

on rcupre une partie de notre image qui est dans le canvas, en fait, X 100, Y0, 90 en largeur,300 en hauteur et on remet l'image donc on a copi des pixels ici, voil tout simplement, c'estpositionn l et on a pris une partie de l'image donc le logo, si je recharge la page, vous voyezqu'il n'y qu'une seule partie de l'image qui est modifie au niveau des couleurs, je clique surcopier pixels, vous avez exactement la mme chose, regardez bien, copie des pixels on sedplace 100, on descend, on on part de zro donc 100 X 0, on descend de 90 sur le ct droitet on descend de 300 ici, on se positionne l ici, et on descend. On prend cette partie-l, avous montre la copie de pixels donc dans un premier temps on a pris une image existante, jerpte pour que vous compreniez bien le concept, on a pris une image existante, on en a prisune partie, on l'a dessine, on a pris ensuite une partie de l'image donc getImage, pareilgetImage, putImage put image, on a modifi les pixels et on a mis l'image donc on a modificette zone-l, et on a recopi l'image, et l pareil, pour copier des pixels on prend une partie del'image seulement et on la recopie juste ici, a fait que si je supprime a, voil, c'est que despixels modifis qui vont tre copis, bien videmment, vous avez a, copier les pixels voil, ilssont tous modifis, je remets comme c'tait avant voil, je relance la copie donc a vous ouvretout un tas de possibilits la copie des pixels vous pouvez trs mettre des Sprite ici donc vouschargez une seule image, que ce soit pour votre application a contient toutes les icnes, sic'est pour votre jeu a contient une partie des graphistes, et ensuite vous faites des copies depixels, des icnes dans le menu par exemple ou dans votre page l ou vous en avez besoindans votre Canvas c'est trs puissant la copie des pixels donc maintenant vous de l'utiliser, cen'est pas trs compliqu, juste en deux lignes de code chaque fois, deux, trois lignes de codevous pouvez utiliser la copie des pixels vous pouvez mme les modifier la vole, donc voilc'est vous de jouer maintenant.Votre plan d'actions ! Maintenant c'est vous de jouer vousavez vu les nouvelles possibilits de l'API Canvas, c'est assez puissant la copie pixels, lamodification de de pixels, d'image en direct donc tout a grce l'API Canvas, vous voyezqu'avec JavaScript vous pouvez crer des jeux vido trs pousss, des applications trsvolues, il faut juste faire attention des tests sur la ressource, les ressources mmoireprocesseur disponibles sur les tablettes et les Smartphones, bien videmment donc commed'habitude vous retrouverez le code source en tlchargement sous ce cours vido, si vousavez des questions posez les directement sous cette vido, quant moi je vous invite regarder la deuxime vido, vous allez de simplement cliquer ici sur le lien, sur l'image, lancerla vido deux, dans la deuxime vido je vous donne des stratgies trs avances pourdvelopper deux trois fois plus rapidement des applications toujours performantes quis'affichent correctement sur tous les navigateurs que ce soient sur les Smartphones, lestablettes ou les ordinateurs de bureau, vous avez mme la possibilit de me poser toutes vosquestions, moi je vous rponds avec des cours dtaills, des exemples de code source pourrpondre votre cas spcifique, donc je vous explique tout a en dtail dans la deuximevido, cliquez simplement sur ce lien, sur l'image, lancer la deuxime vido. Je vous trouve toutde suite dans la deuxime vido pour vous aider, pour rpondre toutes vos questions, je vousdis tout de suite.

Tlcharger l'exemple de la vido

3 / 4

Retrouver le code source comment qui vous a t prsent dans la vido

Downloads

Canvas JavaScript Copie Pixel

Code source comment de l'exemple de la vido, contient les fichiers HTML, CSS etJavaScript

Posez vos questions sur l'API JavaScript CanvasUtilisez la zone commentaire pour poser vos questions, l'quipe dveloppement facile vousrpondra.La technique pour copier des pixels avec Canvas en JavaScript

Powered by TCPDF (www.tcpdf.org)

4 / 4