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

十多年建站經(jīng)驗， 成都網(wǎng)站設(shè)計、成都做網(wǎng)站客戶的見證與正確選擇。成都創(chuàng)新互聯(lián)提供完善的營銷型網(wǎng)頁建站明細(xì)報價表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。

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

文件資源

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

代碼

網(wǎng)頁的body部分

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

    
            您的瀏覽器不支持canvas
    
    
    
    
    
                           
               
    
     
 

js部分

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

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

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

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

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

文章名稱：如何使用canvas實現(xiàn)github404動態(tài)-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://weahome.cn/article/icphg.html