canvas 實現 github404動態效果

pumpkin9 發布于2019-08-29 13:48 / 420人閱讀

摘要：使用來完成的動態效果前幾天使用樣式和致敬了一下的類似界面，同時最近又接觸了，本著瞎折騰的想法便借著之前的的算法，使用來完成了的動態效果。效果圖文件目錄文件資源文件源碼與圖片在文章末尾給出代碼網頁的部分這里給定義好寬和高設為塊級元素。

使用canvas來完成github404的動態效果

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

效果圖

文件目錄

文件資源

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

代碼

網頁的body部分

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

js部分

  1.這里我還是新建了一個名為github404的json對象，以對所有的參數和方法進
  行封裝
  2.再創建imgData的對象，將所有的img所需的參數傳入
    ps:top和left用于 drawImage() 方法時定位, scale 參數用于計算鼠標移動
    時對應的圖片移動的計算
  3.init()方法用來初始化，是與外部的接口
  4.畫圖方法的實現就是用 for in 循環遍歷 imgData[],再依次賦值,
    最后用drawImage()方法繪畫，只是在移動的繪圖方法中，需要注意使用了
    ctx.clearRect() 方法先將畫布清空。

總結

此次使用canvas來完成這個動態效果，使我更多的了解了canvas的用法。同時使我
對于使用json對象去封裝數據和方法，如何組織代碼都有了更深的一些了解。

源項目地址

云服務器 GPU云服務器 github404 html歌詞動態效果 html加載動態效果 js免費動態效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112719.html

canvas 實現 github404動態效果

摘要：使用來完成的動態效果前幾天使用樣式和致敬了一下的類似界面，同時最近又接觸了，本著瞎折騰的想法便借著之前的的算法，使用來完成了的動態效果。效果圖文件目錄文件資源文件源碼與圖片在文章末尾給出代碼網頁的部分這里給定義好寬和高設為塊級元素。使用canvas來完成github404的動態效果前幾天使用css樣式和js致敬了一下github404的類似界面，同時最近又接觸了canvas，本著瞎...

impig33 2019-08-21 17:35 評論0 收藏0
hexo高階教程：next主題優化之加入網易云音樂、網易云跟帖、炫酷動態背景、自定義樣式，打造屬于你

摘要：我選擇的是萬網，阿里下面的。然后在主題配置文件下添加主題配置文件中添加自定義樣式不得不說還是很人性化的，你可以個性化定制你的網站，你所有的改動需要放在主題文件的文件中，會前言本篇文章是在已經搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以參考我的另一篇博文：了解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo開發自己的博客，這兩篇博文...

weizx 2019-08-29 12:24 評論0 收藏0
hexo高階教程：next主題優化之加入網易云音樂、網易云跟帖、炫酷動態背景、自定義樣式，打造屬于你

摘要：我選擇的是萬網，阿里下面的。然后在主題配置文件下添加主題配置文件中添加自定義樣式不得不說還是很人性化的，你可以個性化定制你的網站，你所有的改動需要放在主題文件的文件中，會前言本篇文章是在已經搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以參考我的另一篇博文：了解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo開發自己的博客，這兩篇博文...

SoapEye 2019-08-20 15:39 評論0 收藏0
hexo高階教程：next主題優化之加入網易云音樂、網易云跟帖、炫酷動態背景、自定義樣式，打造屬于你

摘要：我選擇的是萬網，阿里下面的。然后在主題配置文件下添加主題配置文件中添加自定義樣式不得不說還是很人性化的，你可以個性化定制你的網站，你所有的改動需要放在主題文件的文件中，會前言本篇文章是在已經搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以參考我的另一篇博文：了解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo開發自己的博客，這兩篇博文...

neuSnail 2019-08-01 16:37 評論0 收藏0