suchen

Heim >Web-Frontend >H5-Tutorial >Wie Canvas die Github404-Dynamik implementiert

Wie Canvas die Github404-Dynamik implementiert

php中世界最好的语言
php中世界最好的语言Original
2018-01-30 09:21:342273Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Github404-Dynamik mit Canvas implementieren. Was sind die Vorsichtsmaßnahmen für die Verwendung von Canvas zur Implementierung von Github404-Dynamik?

Vor ein paar Tagen habe ich CSS-Stil und JS verwendet, um die ähnliche Schnittstelle von github404 zu würdigen. Gleichzeitig kam ich kürzlich mit der Idee in Kontakt, herumzuspielen Verwendete den vorherigen js-Algorithmus, um es mithilfe der dynamischen Canvas-Effekte von github404 zu vervollständigen.

Dateiressourcen

Dateiquellcode und Bild finden Sie am Ende des Artikels

Code

Körper Teil der Webseite

Definieren Sie hier die Breite und Höhe der Leinwand und legen Sie sie als Element auf Blockebene fest. Diese IMG-Tags laden diese Bilder, sodass wir sie nicht in js laden müssen, und dann festlegen, dass die Bilder nicht angezeigt werden 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>

js-Teil

1. Hier habe ich noch ein neues JSON-Objekt namens github404 erstellt, um alle Parameter und Methoden zu kapseln

2. Erstellen Sie das imgData-Objekt erneut und übergeben Sie alle für img erforderlichen Parameter an ps:top und left zur Positionierung in der Methode drawImage(). Der Scale-Parameter wird verwendet, um die entsprechende Bildbewegung zu berechnen, wenn sich die Maus bewegt

3. )-Methode wird zur Initialisierung verwendet und stellt die Schnittstelle zur Außenwelt dar

4 Die Implementierung der Zeichenmethode besteht darin, die for in-Schleife zu verwenden, um imgData[] zu durchlaufen, dann Werte nacheinander zuzuweisen und schließlich Verwenden Sie zum Zeichnen die Methode drawImage(), aber bei der mobilen Zeichenmethode müssen Sie darauf achten, dass Sie zuerst die Methode ctx.clearRect() verwenden, um die Leinwand zu löschen. 

<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>

Zusammenfassung

Dieses Mal habe ich Leinwand verwendet, um diesen dynamischen Effekt zu vervollständigen, wodurch ich mehr über die Verwendung von Leinwand verstanden habe. Gleichzeitig erhielt ich

ein tieferes Verständnis dafür, wie man JSON-Objekte zum Kapseln von Daten und Methoden verwendet und wie man Code organisiert.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie das Dropdown-Feld von HTML5 die Benutzererfahrung verbessern soll

So segmentieren Sie die Dateidomäne FileReader von H5 Lesen Sie die Datei und laden Sie sie auf den Server hoch

So verwenden Sie H5s WebGL, um JSON- und Echarts-Diagramme in derselben Schnittstelle zu erstellen

Das obige ist der detaillierte Inhalt vonWie Canvas die Github404-Dynamik implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung des Swipe-Beispiels für das mobile H5-Karussell-Plug-inNächster Artikel：Ausführliche Erläuterung des Swipe-Beispiels für das mobile H5-Karussell-Plug-in

In Verbindung stehende Artikel

Mehr sehen