如何使用canvas實現(xiàn)github404動態(tài)？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設計、成都做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務平江,十余年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220

前幾天使用css樣式和js致敬了一下github404的類似界面，同時最近又接觸了canvas，本著瞎折騰的想法,便借著之前的js的算法，使用canvas來完成了github404的動態(tài)效果。

文件資源

文件源碼與圖片在文章末尾給出

代碼

網(wǎng)頁的body部分

這里給canvas 定義好寬和高,設為塊級元素。這些img 標簽是將這些圖片加載出來，我們就不用在js中去加載了，再將圖片設為不顯示 display:none。

    
            您的瀏覽器不支持canvas
    
    
    
    
    
                           
               
    
     
 

js部分

1.這里我還是新建了一個名為github404的json對象，以對所有的參數(shù)和方法進行封裝

2.再創(chuàng)建imgData的對象，將所有的img所需的參數(shù)傳入ps:top和left用于 drawImage() 方法時定位, scale 參數(shù)用于計算鼠標移動時對應的圖片移動的計算

3.init()方法用來初始化，是與外部的接口

4.畫圖方法的實現(xiàn)就是用 for in 循環(huán)遍歷 imgData[],再依次賦值,最后用drawImage()方法繪畫，只是在移動的繪圖方法中，需要注意使用了ctx.clearRect() 方法先將畫布清空。

關于如何使用canvas實現(xiàn)github404動態(tài)問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關知識。