Il y a quelques jours, j'ai utilisé le style css et js pour rendre hommage à l'interface similaire de github404. En même temps, je suis récemment entré en contact avec canvas Avec l'idée de déconner, j'ai utilisé l'algorithme js précédent. utilisez Canvas pour compléter l'effet dynamique de github404.
rendus
Répertoire de fichiers Ressources de fichiersLe code source du fichier et les images sont donnés en fin d'article
codeLa partie corps de la page Web
Ici, définissez la largeur et la hauteur du canevas et définissez-le comme élément au niveau du bloc. Ces balises img chargent ces images, nous n'avons donc pas besoin de les charger dans js, puis de définir les images pour qu'elles n'affichent pas display:none.
<body> <canvas id=mycanvas width=1680 height=630 style=margin:0;display:block> Votre navigateur ne prend pas en charge le canevas </canvas> <img src=./images/field.png style=display: none > <img src=./images/text.png style=display:none> <img src=./images/cat.png style=display:none> <img src=./images/cat_shadow.png style=display:none> <img src=./images/speeder.png style=display:none> <img src=./images/speeder_shadow. png style=display:none> <img src=./images/buliding_1.png style=display:none> <img src=./images/building_2.png style=display:none> </body>partie js
1. Ici, j'ai toujours créé un nouvel objet json nommé github404 pour encapsuler tous les paramètres et méthodes.
2. Créez à nouveau l'objet imgData et transmettez tous les paramètres requis pour img dans ps:top et left pour le positionnement dans la méthode drawImage(). Le paramètre scale est utilisé pour calculer le mouvement de l'image correspondant lorsque la souris se déplace.
3. La méthode init() est utilisée pour l'initialisation et constitue l'interface avec l'extérieur
4. L'implémentation de la méthode de dessin consiste à utiliser une boucle for in pour parcourir imgData[], puis à attribuer des valeurs dans l'ordre et enfin à utiliser la méthode drawImage() pour dessiner. Cependant, dans la méthode de dessin mobile, vous devez d'abord faire attention à l'utilisation de la méthode ctx.clearRect() pour effacer le canevas.
<script> var github404 = { imgData : {//Enregistrez les informations de toutes les images sous forme d'objets json bg : { top : 0, left : 110,//top et left sont utilisés pour le positionnement, utilisez src : './ images/ field.png',//Échelle du chemin de l'image correspondante : 0,06,//Lorsque la souris bouge, la proportion du mouvement correspondant de l'image}, building_2 : { top : 133, left : 1182, src : './images/building_2.png', échelle : 0,05, }, building_1 : { en haut : 79, gauche : 884, src : './images/building_1.png', échelle : 0,03, }, speeder_shadow : { haut : 261, gauche : 776, src : './images/speeder_shadow.png', échelle : 0,01, }, cat_shadow : { haut : 288, gauche : 667, src : './images/cat_shadow.png', échelle : 0,02, }, speeder : { haut : 146, gauche : 777, src : './images/speeder.png', échelle : 0,01, }, cat : { haut : 88, gauche : 656, src : './images/cat.png', échelle : 0,05, }, texte : { haut : 70, gauche : 364, src : './images/text ' .png', échelle : 0,03, }, }, rate_w : 0, rate_h : 0,//Rapport de décalage field_width : 1680, field_height : 370,//Hauteur et largeur de l'arrière-plan du canevas : document.querySelector('#mycanvas'),//Obtenir l'élément canevas init : function() {//Initialiser la méthode de chargement this.setRateWH(); placeImg( ); this.attachMouseEvent(); }, setRateWH: function() {//Méthode pour calculer le rapport de décalage var window_width = document.body.clientWidth; var window_height = document.body.clientHeight; this.rate_w = this.field_width/window_width; this.rate_h = this.field_height/window_height; }, placeImg: function() {//Méthode de dessin initialisée let ctx = this.canvas.getContext('2d');//Obtenir le pinceau pour(saisir this.imgData){//Traverser l'objet imageData var image = new Image(); var left = this.imgData[key].left; var top = this.imgData[key].top; [ key].src; ctx.drawImage(image,left,top, image.width,image.height); } }, attachMouseEvent: function() { var that = this; document.body.onmousemove = function(e){ that.picMove(e.pageX,e.pageY); } }, picMove: function(pageX,pageY) {//Méthode pour redessiner lorsque la souris bouge let ctx = this. canvas.getContext('2d'); ctx.clearRect(0,0,this.canvas.width,this.canvas.height for(saisissez); this.imgData) { var image = new Image(); var offer_w = this.rate_w * pageX * this.imgData[key].scale; var offer_h = this.rate_h * pageY * this.imgData[key].scale; /Définissez gauche et haut, et positionnez les paramètres lors du dessin en dessous var left = this.field_width/100 - offer_w + this.imgData[key].left; this.field_height/100 - offer_h + this.imgData[key].top; image.src = this.imgData[key].src; } } window.onload = function() { //Appelez uniquement la méthode init de github404 pour encapsuler les données github404.init(); } </script> RésumerCette fois, j'ai utilisé du canevas pour compléter cet effet dynamique, ce qui m'a fait mieux comprendre l'utilisation du canevas. fais-moi en même temps
J'ai une compréhension plus approfondie de l'utilisation d'objets json pour encapsuler des données et des méthodes et de la manière d'organiser le code.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.