Maison >interface Web >Tutoriel H5 >Comment Canvas implémente la dynamique github404

Comment Canvas implémente la dynamique github404

php中世界最好的语言original: 2018-01-30 09:21:342315parcourir

Cette fois, je vais vous montrer comment implémenter la dynamique github404 avec Canvas. Quelles sont les précautions pour utiliser Canvas pour implémenter la dynamique github404. Ce qui suit est un cas pratique, jetons un coup d'œil.

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. a utilisé l'algorithme js précédent pour le compléter en utilisant les effets dynamiques de github404.

Ressources du fichier

Le code source du fichier et l'image sont donnés à la fin de l'article

code

corps partie 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 ne soient pas affichées display:none.

<body>
    <canvas id="mycanvas" width="1680" height="630"
        style="margin:0;display:block">
            您的浏览器不支持canvas
    </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 l'objet imgData. à nouveau 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 bouge

3. ) 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 la boucle for in pour parcourir imgData[], puis à attribuer des valeurs dans l'ordre, et enfin. utilisez la méthode drawImage() pour dessiner, mais 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: {//将所有图片的信息用json对象记录
                bg: {
                    top: 0,
                    left: 110,//top和left用于定位，在画图时使用
                    src: &#39;./images/field.png&#39;,//对应图片路径
                    scale: 0.06,//鼠标移动时，该图片所对应移动的比例
                },
                building_2: {
                    top: 133,
                    left: 1182,
                    src: &#39;./images/building_2.png&#39;,
                    scale: 0.05,
                },
                building_1: {
                    top: 79,
                    left: 884,
                    src: &#39;./images/buliding_1.png&#39;,
                    scale: 0.03,
                },
                speeder_shadow: {
                    top: 261,
                    left: 776,
                    src: &#39;./images/speeder_shadow.png&#39;,
                    scale: 0.01,
                },
                cat_shadow: {
                    top: 288,
                    left: 667,
                    src: &#39;./images/cat_shadow.png&#39;,
                    scale: 0.02,
                },
                speeder: {
                    top: 146,
                    left: 777,
                    src: &#39;./images/speeder.png&#39;,
                    scale: 0.01,
                },
                cat: {
                    top: 88,
                    left: 656,
                    src: &#39;./images/cat.png&#39;,
                    scale: 0.05,
                },
                text: {
                    top: 70,
                    left: 364,
                    src: &#39;./images/text.png&#39;,
                    scale: 0.03,
                },
            },
            rate_w: 0,
            rate_h: 0,//偏移的比例
            field_width: 1680,
            field_height: 370,//背景高度和宽度
            canvas: document.querySelector(&#39;#mycanvas&#39;),//获得canvas元素
 
            init: function() {//初始化加载方法
                this.setRateWH();
                this.placeImg();
                this.attachMouseEvent();
            },
            setRateWH: function() {//计算偏移比的方法
                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() {//初始化的绘图方法
                let ctx = this.canvas.getContext(&#39;2d&#39;);//获得画笔
                for(key in this.imgData){//遍历imageData 对象
                    var image = new Image();
                    var left = this.imgData[key].left;
                    var top = this.imgData[key].top;   
                    image.src = this.imgData[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) {//鼠标移动时重新画图的方法
                let ctx = this.canvas.getContext(&#39;2d&#39;);
                ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
                for(key in 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;
                    //定义 left和top,下面画图时给参数定位
                    var left = this.field_width/100 - offer_w + this.imgData[key].left;
                    var top = this.field_height/100 - offer_h + this.imgData[key].top;
                    image.src = this.imgData[key].src;
                    ctx.drawImage(image,left,top,
                        image.width,image.height);
                }
            }
        }
 
        window.onload = function() {
            //只调用github404的init方法 封装了数据
            github404.init();
        }
    </script>

Résumé

Cette fois, j'ai utilisé du canevas pour compléter cet effet dynamique, ce qui m'a fait mieux comprendre l'utilisation du canevas. En même temps, cela m'a permis

de mieux comprendre comment utiliser les objets json pour encapsuler des données et des méthodes, et comment organiser le code.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment la liste déroulante HTML5 devrait améliorer l'expérience utilisateur

Comment segmenter le domaine de fichiers de H5 FileReader Lisez le fichier et téléchargez-le sur le serveur

Comment utiliser WebGL de H5 pour créer des graphiques json et echarts dans la même interface

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'exemple de balayage du plug-in du carrousel h5 mobileArticle suivant：Explication détaillée de l'exemple de balayage du plug-in du carrousel h5 mobile

Articles Liés

Voir plus